/* TimeKube — a media and its data (window.TKDetails). Dark stage = one media. */
.mdet{position:fixed;top:var(--topbar-h,60px);left:var(--side-w,232px);right:0;bottom:0;z-index:30;background:#080830;color:#fff;display:flex;flex-direction:column;font-family:inherit;transition:left .25s ease}
.mdet[hidden]{display:none}
body.mdet-open{overflow:hidden}
/* a question asked over the dialog (delete, dates of the moments) shows over it, also on a phone */
body.mdet-open .overlay{z-index:1250}
.mdet-top{display:flex;align-items:center;gap:12px;padding:14px 16px 10px;flex:none}
.mdet-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mdet-title h2{margin:0;font-size:clamp(21px,2.6vw,26px);font-weight:600;letter-spacing:-.025em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdet-crumb{font-size:13px;color:rgba(255,255,255,.62);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdet-pos{display:flex;gap:2px;background:rgba(255,255,255,.08);border-radius:10px;padding:3px}
.mdet-pos button,.mdet-close{width:34px;height:30px;border:0;background:transparent;color:rgba(255,255,255,.7);border-radius:8px;cursor:pointer;display:grid;place-items:center}
.mdet-pos button.on{background:rgba(255,255,255,.18);color:#fff}
.mdet-pos svg,.mdet-close svg,.mdet-tool svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mdet-close{width:36px;height:36px;border-radius:50%}
.mdet-close:hover,.mdet-pos button:hover{background:rgba(255,255,255,.14);color:#fff}
.mdet-body{flex:1;min-height:0;display:flex;padding:0 16px 16px;gap:16px}
.mdet[data-pos="side"] .mdet-body{flex-direction:row}
.mdet[data-pos="bottom"] .mdet-body{flex-direction:column}
.mdet-stage{position:relative;flex:1;min-width:0;min-height:0;container-type:size;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;border-radius:18px;overflow:hidden;background:#0b0b3a}
.mdet-stage img,.mdet-stage video{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;transition:transform .35s ease;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.mdet-stage img{width:auto;height:auto}
/* held: enlarged; swiped: the next one (tk-details.js, gestures). The phone's long-press menu is off on the picture. */
.mdet-stage{touch-action:pan-y pinch-zoom}
.mdet-stage img,.mdet-stage video{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* a video as large as the stage lets it, keeping its ratio (tk-details.js sets --vr from the file) */
.mdet-stage video{width:min(100cqw,calc(100cqh * var(--vr,1.3333)));height:auto;aspect-ratio:var(--vr,1.3333)}
.mdet-audio{width:min(520px,90%)}
/* an upload's video converting, or not supported (yet): its tile's .mini-vstate, larger (#639; index.html 734-735 before 8c-2b) */
.mdet-vstate{width:min(100%,520px);aspect-ratio:4/3;border-radius:12px;overflow:hidden}
.mdet-vstate .mini-vstate{font-size:15px;gap:8px}.mdet-vstate .mini-vstate svg{width:22px;height:22px}.mdet-vstate .mini-vspin{width:28px;height:28px}
.mdet-audio audio{width:100%}
.mdet-nopic{width:40%;aspect-ratio:4/3;border-radius:12px;background:rgba(255,255,255,.06)}
.mdet-many{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(560px,90%)}
.mdet-many img,.mdet-many span{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:rgba(255,255,255,.08);display:block}
.mdet-tools{position:absolute;top:12px;right:12px;display:flex;gap:8px}
.mdet-tool{width:38px;height:38px;border-radius:50%;border:0;background:rgba(8,8,48,.55);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px)}
.mdet-tool:hover{background:rgba(8,8,48,.85)}
.mdet-tool.small{width:32px;height:32px;position:absolute;top:8px;right:8px;background:rgba(255,255,255,.92);color:#080830}
.mdet-panel{background:#fff;color:#080830;border-radius:18px;display:flex;flex-direction:column;min-height:0;transition:width .35s ease,height .35s ease,opacity .3s ease,flex-basis .35s ease}
.mdet[data-pos="side"] .mdet-panel{width:min(420px,42%);flex:none}
.mdet[data-pos="bottom"] .mdet-panel{height:min(46%,420px);flex:none}
.mdet.full .mdet-panel{opacity:0;pointer-events:none}
.mdet.full[data-pos="side"] .mdet-panel{width:0;overflow:hidden}
.mdet.full[data-pos="bottom"] .mdet-panel{height:0;overflow:hidden}
.mdet-tabs{display:flex;gap:4px;padding:10px 12px 0;border-bottom:1px solid #e6e4e4;flex:none}
.mdet-tabs button{border:0;background:transparent;padding:10px 12px;font:inherit;font-size:14px;color:#6b6b80;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.mdet-tabs button.on{color:#080830;border-bottom-color:#080830;font-weight:600}
.mdet-tab{flex:1;min-height:0;overflow:auto;padding:14px 16px}
.mdet-f{margin-bottom:14px}
.mdet-f label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6b6b80;margin-bottom:6px}
.mdet-f input[type="text"],.mdet-f textarea,.mdet-f select{width:100%;box-sizing:border-box;border:1.5px solid #e6e4e4;border-radius:10px;padding:9px 11px;font:inherit;font-size:15px;color:#080830;background:#fff}
.mdet-f textarea{resize:vertical}
.mdet-link{border:0;background:transparent;color:#a9791f;font:inherit;font-size:13px;padding:4px 0;cursor:pointer;text-decoration:underline}
.mdet-where{display:flex;flex-direction:column;gap:8px}
.mdet-place{position:relative}
.mdet-place input{padding-right:34px}
.mdet-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;border-radius:50%;background:#eef2f7;color:#080830;font-size:16px;cursor:pointer;line-height:1}
.mdet-sug{position:absolute;left:0;right:0;top:100%;z-index:5;background:#fff;border:1px solid #e6e4e4;border-radius:10px;box-shadow:0 10px 30px rgba(8,8,48,.12);overflow:hidden}
.mdet-sug button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:9px 11px;font:inherit;font-size:14px;cursor:pointer}
.mdet-sug button:hover{background:#f5f4f4}
.mdet-map{position:relative;height:140px;border-radius:12px;overflow:hidden;background:#eef2f7;transition:height .3s ease}
.mdet-where.big .mdet-map{height:360px}
.mdet-map.off{display:none}
.mdet-map #mdetMap{position:absolute;inset:0}
.mdet-chips{display:flex;flex-wrap:wrap;gap:8px}
.mdet-chip{border:1.5px solid #e6e4e4;border-radius:999px;padding:6px 12px;font-size:14px;background:#fff}
.mdet-chip.add{color:#6b6b80;background:transparent;cursor:not-allowed}
.mdet-chip.who{display:inline-flex;align-items:center;gap:6px;border-color:#080830;color:#080830;font-weight:500;padding-right:6px}
.mdet-chip-x{border:0;background:transparent;color:#6b6b86;font-size:15px;line-height:1;padding:0 2px;cursor:pointer}
.mdet-chip-x:hover{color:#080830}
.mdet-chip.add.on{border:1.5px dashed #080830;color:#080830;background:#fff;cursor:pointer;font-weight:500}
.mdet-chip.add.on.plus{width:33px;height:33px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:19px;font-weight:400;line-height:1}
.mdet-chip.add.on.drawing{border-style:solid;background:#080830;color:#fff}
/* the faces of a photo: a chip each in "Who is in it", a square each over the photo */
.mdet-peoplechips{display:contents}
.mdet-chip.aface{display:inline-flex;align-items:center;gap:2px;padding:3px 6px 3px 4px}
.mdet-chip.add.aface{padding-right:4px}
/* someone with no face to point at in this photo, shown by the face the Kube knows them by */
.mdet-chip-name{display:inline-flex;align-items:center;gap:7px}
.mdet-chip.wpic{display:inline-flex;align-items:center;gap:6px;padding:3px 12px 3px 4px}
.mdet-chip.who.wpic{padding-right:6px}
/* "Who took it": their face inside the box, at the left of the name */
.mdet-author{position:relative}
.mdet-author-pic{position:absolute;left:8px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:#e6e4e4 no-repeat;pointer-events:none}
.mdet-author.has input[type="text"]{padding-left:40px}
.mdet-chip-face{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;padding:0 4px 0 0;font:inherit;font-size:14px;font-weight:500;color:inherit}
.mdet-chip-pic{width:24px;height:24px;flex:none;border-radius:50%;background:#e6e4e4 no-repeat}
.mdet-chip.add.aface.hover,.mdet-chip.add.aface.marked{border-style:solid;background:#eef2f7}
.mdet-chip.who.aface.hover,.mdet-chip.who.aface.marked{background:#eef2f7}
.mdet-chip-wait{width:30px;height:30px;border-radius:8px;align-self:center}
.mdet-faces{position:absolute;inset:0;pointer-events:none}
.mdet-face{display:none;position:absolute;padding:0;background:transparent;border:2px solid #f2c64d;border-radius:10px;box-shadow:0 0 0 1px rgba(8,8,48,.45);pointer-events:auto}
.mdet-faces.all .mdet-face,.mdet-face.hover,.mdet-face.marked{display:block}
.mdet-face.gone{border-style:dashed;opacity:.8}
.mdet-face.hover,.mdet-face.marked{border-width:3px;box-shadow:0 0 0 1px rgba(8,8,48,.45),0 0 0 4px rgba(242,198,77,.35)}
/* the name of a face, above its square (under it at the top of the photo): the square's colour, readable on any photo */
.mdet-fname{display:none;position:absolute;transform:translateY(-100%);margin:0;padding:0 0 4px;border:0;background:transparent;font:inherit;font-size:15px;font-weight:600;line-height:1.2;color:#f2c64d;white-space:nowrap;text-shadow:0 0 2px rgba(8,8,48,.95),0 0 3px rgba(8,8,48,.8),0 1px 2px rgba(8,8,48,.7);cursor:pointer;pointer-events:auto}
.mdet-fname.under{transform:none;padding:4px 0 0}
.mdet-faces.all .mdet-fname,.mdet-fname.hover,.mdet-fname.marked{display:block}
.mdet-fname.none{pointer-events:none}
.mdet-fname.naming{visibility:hidden}
/* marking a face by hand: a veil over the photo takes the drag; a line at the top says what to do */
.mdet-draw{position:absolute;z-index:3;background:rgba(8,8,48,.18);border-radius:8px;cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none}
.mdet-draw i{position:absolute;box-sizing:border-box;border:3px solid #f2c64d;border-radius:10px;box-shadow:0 0 0 1px rgba(8,8,48,.45),0 0 0 4px rgba(242,198,77,.35);pointer-events:none}
.mdet-draw i[hidden]{display:none}
.mdet-hint{position:absolute;z-index:5;left:12px;right:12px;top:12px;width:fit-content;max-width:calc(100% - 24px);margin:0 auto;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;background:#fff;color:#080830;border-radius:22px;padding:7px 8px 7px 16px;font-size:14px;font-weight:500;box-shadow:0 6px 16px rgba(8,8,48,.35)}
.mdet-hint button{border:1.5px solid #e6e4e4;border-radius:999px;padding:5px 12px;font:inherit;font-size:13.5px;font-weight:500;color:#6b6b80;background:#fff;cursor:pointer;white-space:nowrap}
.mdet-hint button.strong{border-color:#080830;color:#080830}
.mdet-stage.drawing .mdet-tools,.mdet-stage.drawing .mdet-bin{visibility:hidden}
.mdet-tool.on{background:#fff;color:#080830}
.mdet-tool[hidden]{display:none}
.mdet-tech{margin-top:18px;padding-top:12px;border-top:1px solid #e6e4e4}
.mdet-tech h4{margin:0 0 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6b6b80;font-weight:600}
.mdet-tech dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
.mdet-tech dt{color:#6b6b80}.mdet-tech dd{margin:0;overflow-wrap:anywhere}
.mdet-actions{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid #e6e4e4;flex:none}
.mdet-msg{flex:1;font-size:13px;color:#6b6b80}
.mdet-msg.err{color:#b3261e}
/* phone: below and full, no position icons */
@media (max-width:720px){
  .mdet{top:0;left:0;z-index:1200}
  .mdet-body{padding:0;gap:0;flex-direction:column!important}
  .mdet-stage{border-radius:0;flex:none;height:42svh}
  .mdet[data-pos] .mdet-panel{width:auto;height:auto;flex:1;border-radius:18px 18px 0 0}
  .mdet.full .mdet-stage{height:100%}
}

.mdet-bin{position:absolute;z-index:4;left:auto;top:10px;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;cursor:pointer}
.mdet-bin:hover{background:rgba(193,18,31,.85)}
.mdet-bin svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* "Your video is uploading": over the video while it goes up (js/tk-details.js, upMsg) */
.mdet-upmsg{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:16px;background:rgba(8,8,48,.55)}
.mdet-upbox{background:#fff;color:#080830;border-radius:18px;padding:20px 24px;max-width:420px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.mdet-upbox p{margin:0 0 6px;font-size:15px;line-height:1.6}
.mdet-upbox .btn{margin-top:10px;width:auto;min-width:96px;padding:10px 30px}
.mdet-upbell{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;margin-left:4px;border-radius:50%;border:1px solid #e6e8f0;vertical-align:middle}
.mdet-upbell svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mdet-nowrap{white-space:nowrap}
.mdet-sentence{display:inline-block}
.mdet-upbell i{position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:50%;background:#f0a500;border:2px solid #fff}