/* One typography and spacing contract for ThaiKara dialogs and sheets. */
:root {
 --popup-title-size:28px; --popup-body-size:16px; --popup-detail-size:13px;
 --popup-text:#fff; --popup-muted:#aaa;
 --popup-space:24px; --popup-field-space:20px; --popup-label-space:8px;
 --popup-action-gap:10px; --popup-padding:40px;
}
:is(.custom-alert-box,.modal,.pick-card,.rm-bs-sheet) {
 box-sizing:border-box;font-family:var(--tk-font);
 font-size:var(--popup-body-size);font-weight:400;line-height:1.5;color:var(--popup-text);overflow-wrap:anywhere;
}
:is(.custom-alert-box,.modal,.pick-card) {
 padding:var(--popup-padding);border-radius:25px;max-height:90dvh;overflow-y:auto;
}
.custom-alert-box {width:90%;max-width:400px;}
:is(.custom-alert-box,.pick-card) {
 border:1.5px solid transparent;
 background:var(--tk-glass-mid) padding-box,var(--tk-border-mid) border-box;
 backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
}
.custom-alert-box h2,.modal h3,.pick-title,.rm-bs-title,#guide-balloon .guide-title {
 font-size:var(--popup-title-size);font-weight:800;line-height:1.35;color:var(--popup-text);
 margin:0 0 var(--popup-space);letter-spacing:normal;
}
.custom-alert-box p,.delete-msg,#guide-balloon .guide-text {
 font-size:var(--popup-body-size);font-weight:400;line-height:1.5;color:var(--popup-text);
 margin:0 0 var(--popup-space);white-space:pre-line;
}
:is(.custom-alert-detail,.popup-detail,.pick-count,.rm-pick-row-count) {
 font-size:var(--popup-detail-size);font-weight:400;line-height:1.5;color:var(--popup-muted);
}
.custom-alert-box .custom-alert-detail {font-size:var(--popup-detail-size);color:var(--popup-muted);}
.popup-field,.modal-field,.custom-alert-box .input-group {text-align:left;margin:0 0 var(--popup-field-space);}
:is(.popup-field,.modal-field,.custom-alert-box .input-group) label {
 display:block;font-size:14px;font-weight:400;color:#ddd;line-height:1.5;
 margin-bottom:var(--popup-label-space);text-transform:none;letter-spacing:normal;
}
:is(.custom-alert-box input,.modal-field input,.modal-field select,.modal-field textarea,.rm-create-pl-input) {
 box-sizing:border-box;width:100%;padding:14px 16px;border-radius:12px;
 font-family:inherit;font-size:var(--popup-body-size);font-weight:400;line-height:1.5;margin-top:0;
}
.custom-alert-box input {border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35);color:var(--popup-text);}
:is(.auth-container .input-group input,.custom-alert-box input,.modal-field input,.modal-field textarea,.rm-create-pl-input):focus {border-color:rgba(255,255,255,.5);background:rgba(0,0,0,.45);outline:2px solid rgba(255,255,255,.8);outline-offset:2px;}
:is(.popup-actions,.modal-actions,.pick-actions,.rm-pick-actions) {display:flex;gap:var(--popup-action-gap);margin-top:var(--popup-space);width:100%;}
:is(.custom-alert-btn,.modal-actions button,.pick-actions button,.rm-pick-btn) {
 flex:1;padding:12px 24px;border-radius:12px;font-family:inherit;
 font-size:var(--popup-body-size);font-weight:600;line-height:1.5;min-height:52px;
}
.custom-alert-btn:not(.custom-alert-cancel-btn) {background:var(--tk-button-bg);border:2px solid transparent;}
.custom-alert-cancel-btn {background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.6);}
.custom-alert-cancel-btn:hover {background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.85);}
.popup-error,.modal-error,.modal-success,.rm-create-pl-error {
 font-size:var(--popup-detail-size);font-weight:400;line-height:1.5;margin:var(--popup-label-space) 0 0;text-align:left;
}
.popup-error,.rm-create-pl-error {color:#ff6b6b;}
.popup-error:empty {display:none;}
.popup-header {display:flex;align-items:center;justify-content:space-between;gap:var(--popup-action-gap);margin-bottom:var(--popup-space);}
.popup-header h3 {margin:0;}
.popup-grid {display:grid;grid-template-columns:1fr 1fr;gap:var(--popup-field-space);margin-bottom:var(--popup-field-space);}
.popup-grid .modal-field {margin:0;}
.popup-note {padding:12px 16px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.04);margin-bottom:var(--popup-field-space);}
.popup-list-row {display:flex;align-items:center;gap:var(--popup-label-space);padding:12px 16px;border-radius:8px;background:rgba(255,255,255,.03);cursor:pointer;font-size:var(--popup-body-size);font-weight:400;margin-bottom:0;}
.popup-list-row .popup-detail {margin-left:auto;}
.pick-card {gap:0;}
.pick-title {text-align:center;}
.pick-item,.rm-pick-row-name {font-size:var(--popup-body-size);font-weight:400;margin-bottom:0;}
.pick-item .pick-count {opacity:1;font-size:var(--popup-detail-size);}
.rm-bs-sheet {padding:var(--popup-space) var(--popup-padding) calc(var(--popup-space) + env(safe-area-inset-bottom));max-height:90dvh;overflow-y:auto;}
.rm-bs-title {padding:0;text-align:center;}
.rm-pick-empty,.rm-pick-loading {font-size:var(--popup-body-size);font-weight:400;margin-bottom:0;}
.popup-loading {background:transparent;border:none;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:scale(1);}
.popup-loading p {margin:var(--popup-space) 0 0;text-shadow:0 2px 4px rgba(0,0,0,.5);}
@media(max-width:600px) { :root {--popup-padding:24px;} .popup-grid {grid-template-columns:1fr;} }

.popup-radio,.modal-field label.popup-radio {display:inline-flex;align-items:center;gap:var(--popup-label-space);padding:6px 10px;border:1px solid var(--border);border-radius:999px;cursor:pointer;font-size:var(--popup-body-size);font-weight:400;margin-bottom:0;}

.popup-radio input,.modal-field .popup-radio input {width:auto;padding:0;margin:0;}

/* Calendar popover and score result share text roles; the score numeral stays a display value. */
.datepicker-popup {box-sizing:border-box;font-family:var(--tk-font);width:400px;min-width:0;max-width:calc(100vw - 16px);max-height:90dvh;overflow-y:auto;padding:var(--popup-padding);font-size:var(--popup-body-size);font-weight:400;line-height:1.5;}
.dp-header {gap:var(--popup-label-space);margin-bottom:var(--popup-space);}
.dp-month-label {flex:1;min-width:0;font-size:var(--popup-title-size);font-weight:800;line-height:1.35;text-align:center;overflow-wrap:anywhere;}
.dp-day {font-size:var(--popup-body-size);font-weight:400;}
.dp-dow,.dp-time label {font-size:var(--popup-detail-size);font-weight:400;color:var(--popup-muted);}
.dp-time {margin-top:var(--popup-field-space);padding-top:var(--popup-field-space);}
.dp-time input[type="number"] {font-size:var(--popup-body-size);font-weight:400;}
.dp-actions {gap:var(--popup-action-gap);margin-top:var(--popup-space);}
.dp-actions button {font-size:var(--popup-body-size);font-weight:600;line-height:1.5;min-height:52px;padding:12px 24px;border-radius:12px;}
.score-title {font-size:var(--popup-title-size);font-weight:800;line-height:1.35;margin-bottom:var(--popup-space);letter-spacing:normal;text-transform:none;}
.score-label {font-size:var(--popup-body-size);font-weight:400;line-height:1.5;}

.popup-floating {position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999999;text-align:center;}

/* Camera preview geometry only; decoding keeps the original camera frames. */
.tk-qr-preview {position:relative;width:min(100%,32dvh);aspect-ratio:1;margin:0 auto;overflow:hidden;border-radius:12px;}
.tk-qr-preview video {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;}

/* The new-playlist action must stay on one line on narrow screens. */
#playlist-pick-new,#rm-pick-create-btn {min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Ownership uses the standard alert card and full-width stacked choices. */
.player-choice-actions {flex-direction:column;}
.player-choice-actions .custom-alert-btn {flex:none;width:100%;white-space:nowrap;}

/* Keep the player-choice heading compact within the standard alert width. */
#player-choice-title {font-size:clamp(16px, calc(6vw - 3.4px), 20px);}