/* Chapter 8, Email people open: the inbox lab. Site tokens only, over /style.css and /playbook/kit/kit.css. Panel
   fills sit on the SVG elements themselves (fill="#1c1a17", the raised ground); this file sets only text and marks. */

/* the still */
.inbox .pb-still text{font-family:var(--font)}
.ib-label{fill:var(--muted);font-size:22px}
.ib-frame,.ib-card{stroke:var(--faint);stroke-width:1.5}
.ib-time{fill:var(--muted);font-size:16px}
.ib-title{fill:var(--ink);font-size:28px}
.ib-rule{stroke:var(--rule)}
.ib-from{fill:var(--ink);font-size:20px}
.ib-subj{fill:var(--ink);font-size:19px}
.ib-prev{fill:var(--muted);font-size:17px}
.ib-note{fill:var(--muted);font-size:17px}
.ib-ghost{fill:var(--faint);font-size:19px}
.ib-tie{fill:none;stroke:var(--halo-lamp);stroke-width:1.5}
.ib-hello{fill:var(--ink);font-size:44px}

/* the live lab: the phone and what it cut; the still steps aside and the layer takes its own height */
.js .inbox .pb-stage > .pb-still{display:none}
.js .inbox .pb-stage > .pb-layer{display:block}
.inbox .pb-stage > .pb-layer{position:relative;inset:auto;height:auto}
.ib-live{--ib-in:calc((var(--pb-stage-w) - 100cqw) / 2 + var(--pb-shift));margin-left:var(--ib-in);max-width:min(60rem,calc(var(--pb-stage-w) - var(--ib-in)));display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:2rem 3rem;align-items:start}
@media (max-width:52rem){.ib-live{grid-template-columns:minmax(0,1fr)}}
.ib-phonebox{position:relative;max-width:22rem}
.ib-phonebox canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ib-screen{border:1px solid var(--faint);border-radius:2rem;background:var(--ground-raised);padding:1rem 1.25rem 1.75rem;color:var(--ink)}
.ib-bar{font-size:.8125rem;color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
.ib-head{font-size:1.5rem;line-height:1.2;margin:.4rem 0 .6rem}
.ib-row{border-top:1px solid var(--rule);padding:.7rem 0 .75rem}
.ib-row:last-child{border-bottom:1px solid var(--rule)}
.ib-line{white-space:nowrap;overflow:hidden;line-height:1.4}
.ib-l-from{display:flex;align-items:center;gap:.45rem;font-size:1rem}
.ib-l-from .ib-t{margin-left:auto;font-size:.8125rem;color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
.ib-dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--spark);flex:none}
.ib-l-subj{font-size:.9375rem;color:var(--ink)}
.ib-l-prev{font-size:.875rem;color:var(--muted);min-height:1.4em}
.ib-l-subj .ib-tag,.ib-l-prev .ib-tag{color:var(--halo-lamp)}

.ib-side{min-width:0}
.ib-cut{margin:.6rem 0 0}
.ib-cut dt{color:var(--muted);font-size:var(--t-meta);margin-top:.9rem}
.ib-cut dd{margin:.15rem 0 0;line-height:1.45}
#ib-cut-subj,#ib-cut-prev{display:block;color:var(--faint);font-size:1.0625rem;overflow-wrap:anywhere}
#ib-cut-subj.is-cut,#ib-cut-prev.is-cut{color:var(--halo-lamp)}
.ib-count{display:block;color:var(--muted);font-size:.875rem;font-variant-numeric:lining-nums tabular-nums;margin-top:.15rem}
.ib-warn{color:var(--halo-lamp);font-size:var(--t-meta);line-height:1.45;margin-top:.8rem}
.ib-warn:empty{display:none}
.ib-open{margin-top:1.6rem;padding:1rem 1.1rem 1.1rem;border:1px solid var(--faint);background:var(--ground-raised)}
.ib-greet{font-size:2rem;line-height:1.2;margin-top:.6rem;color:var(--ink)}
.ib-gap{display:inline-block;width:.8em;height:.9em;vertical-align:-.1em;border-bottom:2px solid var(--halo-lamp)}
.ib-body{color:var(--muted);font-size:var(--t-meta);line-height:1.5;margin-top:.5rem}
.ib-field{color:var(--muted);font-size:.875rem;margin-top:.6rem;font-variant-numeric:lining-nums tabular-nums}
.ib-greet.is-broken + .ib-body{color:var(--muted)}

/* the controls: two text fields, the subscriber radios and the buttons */
.ib-controls{align-items:flex-start;gap:1.5rem 3rem;max-width:60rem}
.ib-inputs{display:flex;flex-direction:column;gap:.9rem;flex:1 1 20rem;min-width:0;max-width:30rem}
.ib-input{display:flex;flex-direction:column;gap:.25rem}
.ib-input label{font-size:var(--t-meta);color:var(--ink)}
.ib-input input{font:inherit;font-size:1rem;color:var(--ink);background:var(--ground-raised);border:1px solid var(--faint);border-radius:0;min-height:44px;padding:.45rem .7rem;width:100%}
.ib-input input:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.ib-hint{font-size:.875rem;color:var(--muted);line-height:1.4}
.ib-buttons{display:flex;flex-wrap:wrap;gap:.6rem}
.ib-who{border:0;margin:0;padding:0;flex:1 1 18rem;min-width:0}
.ib-who legend{color:var(--muted);font-size:var(--t-meta);padding:0;margin-bottom:.5rem}
.ib-radios{display:flex;flex-direction:column;gap:.45rem;margin-bottom:.9rem}
.ib-radios label{position:relative;display:flex;align-items:center;gap:.6rem;min-height:44px;padding:.45rem .9rem;border:1px solid var(--faint);font-size:var(--t-meta);line-height:1.3;cursor:pointer;overflow-wrap:anywhere}
@media (prefers-reduced-motion:no-preference){.ib-radios label{transition:border-color .2s,background-color .2s}}
.ib-radios label:hover,.ib-radios label:has(input:checked){border-color:var(--ink)}
.ib-radios label:has(input:checked){background:var(--ground-raised)}
.ib-radios label:has(input:focus-visible){outline:1px solid var(--ink);outline-offset:3px}
.ib-radios input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ib-radios label::before{content:"";flex:none;width:.55rem;height:.55rem;border:1px solid var(--faint);border-radius:50%}
.ib-radios label:has(input:checked)::before{background:var(--spark);border-color:var(--spark)}
.ib-radios .ib-fn{color:var(--muted);margin-left:auto;padding-left:.75rem;white-space:nowrap}
html:not(.js) .ib-controls{display:none}

/* motion: a changed row and greeting settle in; still and no-JS readers get the end state */
@media (prefers-reduced-motion:no-preference){
  .pb-live .ib-l-subj.is-new,.pb-live .ib-l-prev.is-new,.pb-live .ib-greet.is-new{animation:ib-in .5s var(--ease-draw)}
}
@keyframes ib-in{from{opacity:.25}to{opacity:1}}
[data-pb-tier="still"] .ib-line,[data-pb-tier="still"] .ib-greet{animation:none!important}

/* what I'd do now */
.ib-table-wrap{overflow-x:auto;max-width:44rem;margin-top:1.5rem}
.ib-pairs{border-collapse:collapse;font-size:var(--t-meta);line-height:1.4}
.ib-pairs caption{text-align:left;color:var(--muted);caption-side:top;padding-bottom:.5rem}
.ib-pairs th,.ib-pairs td{text-align:left;font-weight:400;padding:.45rem 1rem .45rem 0;border-top:1px solid var(--rule);vertical-align:top}
.ib-pairs thead th{color:var(--muted)}