/* Share my taste (tastecard.js): the chip in the notebook header and the preview sheet.
   Phone first: a full-screen night sheet with the card on top; from 760 px a centred dialog
   with the card on the left. The card itself is a canvas (1080 × 1350), scaled to fit. */

.tc-chip { display: inline-flex; align-items: center; gap: 8px; }
.tc-chip > span { color: var(--red); font: 400 17px/1 "Yu Mincho", "MS Mincho", serif; letter-spacing: 0; }

.tc-sheet { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; color: var(--paper); background: var(--night); }
.tc-sheet::backdrop { background: rgba(8, 8, 9, .8); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.tc-inner { box-sizing: border-box; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: max(12px, env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom)); }

.tc-head { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 12px; align-items: start; }
.tc-kicker { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; color: var(--red); font: 800 12px/1.3 Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.tc-kicker > span { display: grid; place-items: center; width: 22px; height: 22px; color: var(--paper); background: var(--red); font: 400 14px/1 "Yu Mincho", "MS Mincho", serif; letter-spacing: 0; transform: rotate(-6deg); }
.tc-head h2 { margin: 6px 0 0; color: var(--paper); font: italic 400 26px/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.02em; }
.tc-close { width: 44px; height: 44px; padding: 0; border: 1px solid #4a4843; border-radius: 50%; color: var(--paper); background: transparent; font: 400 28px/1 Georgia, serif; cursor: pointer; }
.tc-close:hover { border-color: var(--red); color: var(--red); }

.tc-figure { display: grid; place-items: center; margin: 14px 0 28px; }
/* Leaves room for the head and the first controls on a phone; never wider than the screen. */
.tc-canvas { display: block; width: min(100%, calc((100dvh - 300px) * .8)); min-width: min(100%, 240px); height: auto; aspect-ratio: 4 / 5; background: #f1ecdc; box-shadow: 8px 8px 0 #050505; }
.tc-sheet[data-style="night"] .tc-canvas { background: #17171a; outline: 1px solid rgba(242, 238, 223, .16); }

.tc-controls { display: grid; gap: 12px; }
.tc-styles { min-width: 0; margin: 0; padding: 0; border: 0; }
.tc-styles legend { margin-bottom: 8px; padding: 0; color: #9b978e; font: 700 11px/1.3 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.tc-style-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tc-style { position: relative; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 12px; border: 1px solid #4a4843; color: #cfcbbf; font: 15px/1.2 Arial, sans-serif; cursor: pointer; transition: border-color .2s, background-color .2s; }
.tc-style input, .tc-name input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.tc-style i { flex: none; width: 22px; height: 28px; border: 1px solid rgba(242, 238, 223, .35); background: #f1ecdc; box-shadow: 2px 2px 0 #050505; }
.tc-style[data-style="paper"] i { background: linear-gradient(135deg, transparent 0 58%, var(--red) 58% 76%, transparent 76%), #f1ecdc; }
.tc-style[data-style="night"] i { background: linear-gradient(135deg, transparent 0 58%, var(--red) 58% 76%, transparent 76%), #17171a; }
.tc-style:hover { border-color: #77746d; }
.tc-style:has(input:checked) { border-color: var(--red); color: var(--paper); background: rgba(239, 75, 63, .12); }
.tc-style:has(input:focus-visible), .tc-name:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }

.tc-name { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 52px; padding: 4px 0; cursor: pointer; }
.tc-name[hidden] { display: none; }
.tc-name i { position: relative; width: 46px; height: 28px; border: 1px solid #77746d; border-radius: 14px; background: #1e1e21; transition: background-color .2s, border-color .2s; }
.tc-name i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #9b978e; transition: transform .2s, background-color .2s; }
.tc-name input:checked + i { border-color: var(--red); background: var(--red); }
.tc-name input:checked + i::after { background: var(--paper); transform: translateX(18px); }
.tc-name b { display: block; color: var(--paper); font: 400 18px/1.2 Georgia, serif; }
.tc-name small { display: block; margin-top: 3px; color: #9b978e; font: 13px/1.35 Arial, sans-serif; overflow-wrap: anywhere; }

.tc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tc-actions button { flex: 1 1 0; min-width: 0; min-height: 50px; padding: 0 12px; border: 1px solid #57544e; color: var(--paper); background: transparent; font: 800 12px/1.2 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.tc-actions button[hidden] { display: none; }
.tc-actions button:hover { border-color: var(--red); color: #fff; }
.tc-actions .tc-primary { flex-basis: 100%; min-height: 54px; border-color: var(--red); color: #fff; background: var(--red); box-shadow: 5px 5px 0 #050505; }
.tc-actions .tc-primary:hover { border-color: var(--paper); background: #d63f34; }
.tc-actions button:active { transform: translate(1px, 1px); }

.tc-privacy { margin: 6px 0 0; color: #9b978e; font: 13px/1.45 Arial, sans-serif; }
.tc-status { min-height: 1.5em; margin: 0; color: var(--paper); font: italic 15px/1.45 Georgia, serif; }
.tc-status[data-kind="error"] { color: #ff9b8f; font-style: normal; font-family: Arial, sans-serif; }
.tc-sheet button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

@media (min-width: 760px) {
    .tc-sheet { inset: 0; width: min(960px, calc(100% - 48px)); height: fit-content; max-height: calc(100dvh - 48px); margin: auto; border: 1px solid #3b3935; box-shadow: 14px 14px 0 #050505; }
    .tc-inner { display: grid; grid-template-columns: auto minmax(280px, 1fr); grid-template-rows: auto 1fr; column-gap: 32px; max-height: calc(100dvh - 50px); padding: 28px; }
    .tc-figure { grid-row: 1 / 3; margin: 0; }
    /* As tall as the screen allows, but never so wide that the controls column drops below 280 px. */
    .tc-canvas { width: auto; min-width: 0; height: min(calc(100dvh - 108px), 680px, calc((100vw - 416px) * 1.25)); }
    .tc-head h2 { font-size: 32px; }
    .tc-controls { align-content: start; margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .tc-style, .tc-name i, .tc-name i::after, .tc-actions button { transition: none; }
}