/* Publishing to YouTube (publish.js): the publish dialog, "Change date" for a video that is already
   there, and the note at the foot of the screen that follows an upload. On app.css's palette, and
   every rule under .kcp, so it sits on any page beside that page's own styles. */
.kcp { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; }
.kcp.wide { width: min(1040px, calc(100vw - 24px)); }
.kcp.kcm { width: min(600px, calc(100vw - 24px)); }
.kcp[open] { display: flex; flex-direction: column; }
.kcp-yt { width: 22px; height: 16px; flex: none; display: block; }
.kcp-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 20px; border-bottom: 1px solid var(--line); }
.kcp-head > div { flex: 1; min-width: 0; }
.kcp-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.kcp-head p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kcp-head .btn svg { width: 18px; height: 18px; }
.kcp-pic { flex: none; width: 64px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--sunk); border: 1px solid var(--line); }
.kcp-pic:empty { display: none; }
.kcp-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kcp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.kcp-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--sunk); }
.kcp-foot > p { flex: 1 1 240px; min-width: 0; margin: 0; font-size: 13.5px; color: var(--ink-2); }
.kcp-foot > p b { color: var(--ink); font-weight: 600; }
.kcp-foot .btn.primary { min-width: 132px; }
.kcp-foot .kcp-side { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 4px; margin-left: -8px; }
.kcp-err { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--bad-soft); color: var(--bad); font-size: 13.5px; font-weight: 600; }
.kcp-note { margin: 0; color: var(--ink-2); font-size: 13px; }
.kcp-note.bad { color: var(--bad); font-weight: 600; }
.kcp-msg { display: grid; gap: 8px; padding: 6px 0 4px; }
.kcp-msg h3, .kcp-sure h3 { margin: 0; font-size: 17px; font-weight: 600; }
.kcp-msg p, .kcp-sure p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.kcp-msg a:not(.btn) { color: var(--accent-2); }
.kcp .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.kcp-sure { display: grid; gap: 8px; }
.kcp-wait { display: grid; gap: 10px; padding: 8px 0; }
.kcp-wait i, .kcp-shimmer, .kcp .skel i, .kcp-best.wait i { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--sunk) 20%, var(--hover) 50%, var(--sunk) 80%); background-size: 250% 100%; animation: kcp-shimmer 1.4s linear infinite; }
.kcp-wait i { height: 14px; }
.kcp-wait i:nth-child(1) { width: 62%; } .kcp-wait i:nth-child(2) { width: 88%; } .kcp-wait i:nth-child(3) { width: 44%; }
@keyframes kcp-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* the form: where and when on one side, how it looks on YouTube on the other; one column on a phone */
#kcpForm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 28px; align-items: start; }
@media (min-width: 900px) { .kcp.wide #kcpForm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kcp-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.kcp section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.kcp section > h3 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.kcp fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.kcp legend { padding: 0; margin-bottom: 4px; font-size: 13px; font-weight: 600; }

.kcp-chans { display: grid; gap: 6px; }
.kcp-chan { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-2); background: var(--field); border-radius: 10px; cursor: pointer; font-size: 14px; }
.kcp-chan:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.kcp-chan input { accent-color: var(--accent); margin: 0; }
.kcp-chan img, .kcp-chan i { width: 24px; height: 24px; border-radius: 50%; display: block; flex: none; background: var(--sunk); }
.kcp-chan span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.kcp-chan small { color: var(--ink-2); font-weight: 400; }
.kcp-chan.broken { cursor: default; opacity: .8; }
.kcp-chan a { color: var(--accent-2); font-size: 13px; font-weight: 600; }
.kcp-add { justify-self: start; font-size: 13px; color: var(--accent-2); }
/* the channel's playlists, where it has them */
.kcp-list { display: grid; gap: 6px; }
.kcp-list select { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--field); color: var(--ink); font: 14px/1.45 'DM Sans', system-ui, sans-serif; color-scheme: inherit; }
.kcp-list select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.kcp-list select:disabled { opacity: .6; }
.kcp-list a { color: var(--accent-2); font-weight: 600; }

/* now or later: two big choices, so the answer is never the fourth of four small ones */
.kcp-when { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kcp-when label { position: relative; display: block; cursor: pointer; }
.kcp-when input { position: absolute; opacity: 0; pointer-events: none; }
.kcp-when span { display: grid; gap: 1px; padding: 10px 12px; border: 1px solid var(--line-2); background: var(--field); border-radius: 10px; }
.kcp-when b { font-size: 14.5px; font-weight: 600; }
.kcp-when small { font-size: 12.5px; color: var(--ink-2); }
.kcp-when input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.kcp-when input:focus-visible + span { box-shadow: 0 0 0 1px var(--accent), var(--ring); }
#kcpNow { display: grid; gap: 8px; }
.kcp-seg { display: flex !important; flex-wrap: wrap; gap: 6px; }
.kcp-seg legend { flex: 0 0 100%; }
.kcp-seg label { flex: 1 1 0; min-width: 84px; position: relative; }
.kcp-seg input { position: absolute; opacity: 0; pointer-events: none; }
.kcp-seg span { display: block; text-align: center; padding: 7px 6px; border: 1px solid var(--line-2); background: var(--field); border-radius: 8px; cursor: pointer; font-size: 13.5px; font-weight: 500; }
.kcp-seg input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.kcp-seg input:focus-visible + span { box-shadow: var(--ring); }

/* the words: grey lines where they will go while they are written, gone the moment you type */
.kcp-field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.kcp input[type=text], .kcp textarea { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--field); color: var(--ink); font: 14px/1.45 'DM Sans', system-ui, sans-serif; resize: vertical; min-height: 0; color-scheme: inherit; }
.kcp input[type=text]:focus, .kcp input[type=time]:focus, .kcp textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.kcp .box { position: relative; display: block; }
.kcp .skel { display: none; position: absolute; inset: 0; padding: 15px 13px; gap: 10px; align-content: start; pointer-events: none; }
.kcp .box.wait .skel { display: grid; }
.kcp .box.wait ::placeholder { color: transparent; }
.kcp .skel i { height: 11px; }
#kcpName + .skel i { width: 68%; }
#kcpTags + .skel i { width: 46%; }
#kcpDesc + .skel i:nth-child(1) { width: 96%; } #kcpDesc + .skel i:nth-child(2) { width: 89%; }
#kcpDesc + .skel i:nth-child(3) { width: 93%; } #kcpDesc + .skel i:nth-child(4) { width: 57%; }
#kcpDesc + .skel i:nth-child(5) { visibility: hidden; } #kcpDesc + .skel i:nth-child(6) { width: 82%; }
.kcp-redo { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); font-size: 13px; color: var(--ink); }
.kcp-redo span { flex: 1 1 220px; min-width: 0; }
.kcp-redo button, .kcp-best button, .kcp-calnav button, .kcp-onchan .all { flex: none; margin: 0; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--field); color: var(--ink); font: 500 13px/1 'DM Sans', system-ui, sans-serif; cursor: pointer; }
.kcp-redo button:hover, .kcp-best button:hover, .kcp-calnav button:hover:not(:disabled), .kcp-onchan .all:hover { background: var(--hover); }
.kcp-more > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.kcp-more[open] { display: grid; gap: 10px; }
.kcp-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.kcp-check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }

/* the thumbnail: four made from the film, and the one picked as it will sit in YouTube's feed */
.kcp-thumbgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kcp-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--sunk); }
.kcp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kcp-thumb input { position: absolute; opacity: 0; pointer-events: none; }
.kcp-thumb:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.kcp-thumb:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--accent), var(--ring); }
.kcp-thumb .tick { display: none; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-fill); color: var(--accent-ink); font: 700 13px/22px 'DM Sans', system-ui, sans-serif; text-align: center; }
.kcp-thumb:has(input:checked) .tick { display: block; }
.kcp-shimmer { aspect-ratio: 16 / 9; border-radius: 10px; }
.kcp-thumbgrid:empty { display: none; }
/* a Short's thumbnails are its own 9:16 frame: four in a row, that shape */
.kcp-thumbgrid.tall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kcp-thumbgrid.tall .kcp-thumb { aspect-ratio: 9 / 16; }
/* a picture of their own: a tile to upload one, beside it once it is there */
.kcp-upload { aspect-ratio: 16 / 9; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 8px; border: 2px dashed var(--dash); border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.kcp-upload b { font-size: 22px; line-height: 1; font-weight: 500; color: var(--ink-2); }
.kcp-upload small { font-size: 12px; font-weight: 400; color: var(--ink-2); }
.kcp-upload:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.kcp-upload:focus-visible { outline: none; box-shadow: var(--ring); }
.kcp-upload:disabled { opacity: .6; cursor: progress; }
.kcp-thumbs .own { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.kcp-thumbs .own input { accent-color: var(--accent); margin: 0; }
.kcp-feed { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 10px; background: #fff; color: #0f0f0f; border: 1px solid var(--line); }
.kcp-feed img { width: 168px; height: 94.5px; flex: none; display: block; border-radius: 8px; object-fit: cover; }
.kcp-feed b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 14px/1.35 Roboto, Arial, sans-serif; }
.kcp-feed small { display: block; margin-top: 3px; color: #606060; font: 12px/1.4 Roboto, Arial, sans-serif; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kcp-feed { background: #0f0f0f; color: #f1f1f1; } :root:not([data-theme="light"]) .kcp-feed small { color: #aaa; } }
:root[data-theme="dark"] .kcp-feed { background: #0f0f0f; color: #f1f1f1; }
:root[data-theme="dark"] .kcp-feed small { color: #aaa; }

/* scheduling: the channel's calendar -- a square a day, each video by its picture, what went out
   and what is scheduled -- the day suggested from the pace the channel keeps, the day picked, and
   under it the same videos by title */
.kcp-plan { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.kcp-best { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 13px; }
.kcp-best b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.kcp-best b svg { flex: none; width: 15px; height: 15px; color: var(--accent-2); }
.kcp-best p { grid-column: 1 / -1; margin: 0; }
.kcp-best small { grid-column: 1 / -1; color: var(--ink-2); font-size: 12px; }
.kcp-best .on { color: var(--good); font-size: 13px; font-weight: 600; white-space: nowrap; }
.kcp-best.plain { background: var(--sunk); }
.kcp-best.wait i { height: 11px; margin: 4px 0; }
.kcp-best.wait i + i { width: 62%; }
.kcp-calhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kcp-calhead b { font-size: 14px; font-weight: 600; }
.kcp-calnav { display: flex; gap: 4px; }
.kcp-calnav button { height: 28px; min-width: 28px; padding: 0 8px; }
.kcp-calnav button:disabled { opacity: .4; cursor: default; }
.kcp-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kcp-cal .wd { padding-bottom: 1px; text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.kcp-cal .day { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 2px; min-width: 0; overflow: hidden; margin: 0; padding: 3px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--field); color: var(--ink); font: 600 11.5px/1.25 'DM Sans', system-ui, sans-serif; text-align: left; cursor: pointer; }
.kcp-cal .day::after { content: ''; display: block; grid-row: 2; grid-column: 1; aspect-ratio: 16 / 9; }  /* every square as tall as one with a picture */
.kcp-cal .day .n { justify-self: start; max-width: 100%; padding: 1px 4px; border-radius: 999px; white-space: nowrap; overflow: hidden; }
.kcp-cal .day.past { border-color: transparent; background: var(--sunk); color: var(--ink-3); }
.kcp-cal .day:disabled { cursor: default; }
.kcp-cal .day.today .n { background: var(--ink); color: var(--panel); }
.kcp-cal .day:not(.past):hover { border-color: var(--accent); }
.kcp-cal .day.best { border: 1.5px dashed var(--accent); padding: 2.5px; }
.kcp-cal .day.pick { border: 2px solid var(--accent); padding: 2px; background: var(--accent-soft); }
.kcp-cal .day.hot { box-shadow: var(--ring); }
.kcp-cal .pic { position: relative; grid-row: 2; grid-column: 1; display: block; align-self: end; width: 100%; min-width: 0; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--hover); }
.kcp-cal .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kcp-cal .day.past .pic img { opacity: .82; }
.kcp-cal .pic.mine { outline: 1.5px solid var(--accent); }
.kcp-cal .pic .clk, .kcp-key .sch { background: var(--accent-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 3.2V6l1.9 1.2' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.kcp-cal .pic .clk { position: absolute; left: 2px; bottom: 2px; width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; }
.kcp-cal .more { position: absolute; top: 4px; right: 5px; font-size: 10px; font-weight: 700; color: var(--ink-2); }
.kcp-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--ink-2); font-size: 12px; }
.kcp-key > span { display: inline-flex; align-items: center; gap: 5px; }
.kcp-key .k { display: block; width: 13px; height: 13px; border-radius: 4px; }
.kcp-key .was { background: var(--sunk); border: 1px solid var(--line-2); }
.kcp-key .sch { border-radius: 50%; }
.kcp-key .sug { border: 1.5px dashed var(--accent); }
.kcp-key .you { border: 2px solid var(--accent); background: var(--accent-soft); }
.kcp-at { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; }
.kcp-at b { font-weight: 600; }
.kcp input[type=time] { width: auto; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--field); color: var(--ink); font: 14px/1.3 'DM Sans', system-ui, sans-serif; }
.kcp-onchan { display: grid; gap: 2px; min-width: 0; }
.kcp-onchan h4 { margin: 8px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); }
.kcp-onchan .vrow { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; align-items: center; padding: 4px; border-radius: 8px; color: inherit; text-decoration: none; }
.kcp-onchan a.vrow:hover, .kcp-onchan .vrow.hot { background: var(--hover); }
.kcp-onchan .vrow .pic { display: block; width: 80px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--sunk); }
.kcp-onchan .vrow .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kcp-onchan .vrow b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.3; }
.kcp-onchan .vrow small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 12px; }
.kcp-onchan .vrow.this { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.kcp-onchan .chip { margin-right: 5px; }
.kcp-onchan .all { justify-self: start; margin-top: 4px; }
.kcp-onchan .none { margin: 4px 0; color: var(--ink-2); font-size: 13px; }

/* after Publish: what was done, the upload, then the link */
.kcp-sent { display: grid; justify-items: start; gap: 8px; padding: 10px 0 6px; }
.kcp-sent .mark { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--good-soft); color: var(--good); font-size: 22px; font-weight: 700; }
.kcp-sent .mark.busy { background: var(--accent-soft); }
.kcp-sent .mark.busy::after { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--accent); border-right-color: transparent; animation: kcp-spin .8s linear infinite; }
@keyframes kcp-spin { to { transform: rotate(360deg); } }
.kcp-sent h3 { margin: 4px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.kcp-sent p { margin: 0; font-size: 14px; color: var(--ink-2); }
.kcp-sent p b { color: var(--ink); }
.kcp-progress { width: 100%; height: 8px; border-radius: 4px; background: var(--sunk); overflow: hidden; margin: 6px 0 2px; }
.kcp-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .6s ease; }
.kcp-progress.wait i { width: 30% !important; animation: kcp-slide 1.2s ease-in-out infinite alternate; }
@keyframes kcp-slide { from { margin-left: 0; } to { margin-left: 70%; } }
/* the three steps a publish goes through: up, processed by YouTube, and what it is then */
.kcp-steps { list-style: none; width: 100%; margin: 6px 0 2px; padding: 12px 14px; display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--sunk); }
.kcp-steps li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; color: var(--ink-3); }
.kcp-steps li i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--dash); font-style: normal; font-size: 12px; font-weight: 700; }
.kcp-steps li span { min-width: 0; }
.kcp-steps li small { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.kcp-steps li.done { color: var(--ink); }
.kcp-steps li.done i { border-color: transparent; background: var(--good-soft); color: var(--good); }
.kcp-steps li.now { color: var(--ink); font-weight: 600; }
.kcp-steps li.now i { border-color: var(--accent); border-right-color: transparent; animation: kcp-spin .8s linear infinite; }

/* a channel that has the film already: said where the form was, and a second copy asked for by name */
.kcp-chan em { flex: none; font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 3px 8px; border-radius: 999px; background: var(--sunk); white-space: nowrap; }
.kcp-chan:has(input:checked) em { background: var(--panel); }
.kcp #kcpForm.there #kcpWhenSec, .kcp #kcpForm.there #kcpLook { display: none; }
.kcp-there { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--sunk); font-size: 14px; }
.kcp-there h4 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.kcp-there p { margin: 0; color: var(--ink-2); }
.kcp-there p b, .kcp-there h4 b { color: var(--ink); font-weight: 600; }
.kcp-there a { color: var(--accent-2); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.kcp-there .kcp-link { justify-self: start; margin-top: 2px; background: none; border: 0; padding: 0; color: var(--ink-2); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kcp-there .kcp-link:hover { color: var(--ink); }
.kcp-there .sure { display: grid; gap: 10px; margin-top: 2px; padding: 12px; border-radius: 10px; background: var(--accent-soft); }
.kcp-there .sure p { color: var(--ink); }
.kcp-there .sure .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.kcp-there.asked { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 10px 12px; background: var(--accent-soft); border-color: transparent; }
.kcp-there.asked p { color: var(--ink); font-size: 13px; }
.kcp-there.asked .kcp-link { margin: 0; }

/* a publish going on in the background, or something just done: a note at the foot of the screen */
.kcp-toast { position: fixed; z-index: 80; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px);
  display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 16px; border-radius: 12px; background: var(--ink); color: var(--bg); box-shadow: var(--dialog); font-size: 14px; line-height: 1.4; }
.kcp-toast a { color: inherit; font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.kcp-toast button.again { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kcp-toast .x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: inherit; opacity: .7; cursor: pointer; }
.kcp-toast .x svg { width: 16px; height: 16px; }
.kcp-toast .x:hover { opacity: 1; background: rgba(127, 127, 127, .25); }
.kcp-toast .bar { flex: none; width: 64px; height: 5px; border-radius: 3px; background: rgba(127, 127, 127, .4); overflow: hidden; }
.kcp-toast .bar i { display: block; height: 100%; background: var(--accent); transition: width .6s ease; }

@media (max-width: 560px) {
  .kcp, .kcp.wide, .kcp.kcm { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; }
  .kcp-body { padding: 14px 14px 18px; }
  .kcp-head { padding: 10px 8px 10px 14px; }
  .kcp-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .kcp-foot > p { flex-basis: 100%; }
  .kcp-foot .btn.primary { flex: 1; }
  .kcp-foot .kcp-side { flex-basis: 100%; }
  .kcp-plan { padding: 8px; }
  .kcp-at .lead { display: none; }
  .kcp-cal { gap: 3px; }
  .kcp-cal .day { padding: 2px; font-size: 10.5px; }
  .kcp-cal .day.best { padding: 1.5px; }
  .kcp-cal .day.pick { padding: 1px; }
  .kcp-cal .day .n { padding: 1px 3px; }
  .kcp-onchan .vrow { grid-template-columns: 72px minmax(0, 1fr); }
  .kcp-onchan .vrow .pic { width: 72px; }
  .kcp-feed img { width: 120px; height: 67.5px; }
}
@media (prefers-reduced-motion: reduce) { .kcp-wait i, .kcp-shimmer, .kcp .skel i, .kcp-best.wait i, .kcp-sent .mark.busy::after, .kcp-steps li.now i { animation: none; } }

/* the same film in another language (lib/localize.js): which one it is, and a word about the channel */
.kcp-head p.kcp-lang { margin-top: 4px; width: fit-content; max-width: 100%; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: 12.5px; font-weight: 600; -webkit-line-clamp: 1; }
.kcp-langhint { margin: 8px 2px 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.kcp-chan .kcp-cl { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--sunk); font-weight: 600; }