/* notes.css — «My wine notes», the tasting diary in the Academy (2026-10-29). Lives inside the
   Savoir card (#infoKnowBody): cream chips on the cream card, bordeaux for the chosen ones, gold
   for the grape's typical aromas. Buttons are capsules like the rest of the app (main.css). */

.nt-steps{display:flex;align-items:center;gap:5px;margin:0 0 14px;justify-content:center}
.nt-step{width:18px;height:4px;border-radius:2px;background:#e3cf9c}
.nt-step.done{background:#c9a550}
.nt-step.cur{background:#5e0c23}
.nt-step-n{font-size:11px;color:#8a7a5a;margin-left:6px;font-weight:600}
.nt-step-title{font-family:var(--font-display);font-size:17px;letter-spacing:2px;text-transform:uppercase;color:#5e0c23;text-align:center;margin:2px 0 8px}
.nt-intro{font-size:13.5px;color:#5a4a3a;text-align:center;margin:-6px 0 14px;line-height:1.4}
.nt-ctx-line{font-size:12.5px;color:#8a7a5a;text-align:center;margin:0;font-style:italic}
.nt-wine-name + .nt-ctx-line{margin-top:3px}
.nt-wine-line{font-size:14px;color:#5e0c23;text-align:center;margin:-2px 0 12px;padding:9px 14px;border:1.5px solid #e3cf9c;border-radius:14px;background:#fffaf0;line-height:1.35}
.nt-hint{font-size:12px;color:#8a7a5a;line-height:1.4;margin:2px 0 8px}
.nt-label-match{font-size:12.5px;color:#8a6a1a;line-height:1.4;margin:0 0 8px;padding:7px 10px;border:1.5px dashed #c9a550;border-radius:12px;background:#fdf8f0}
.nt-sub{margin-top:18px}

/* home */
.nt-home .know-tile{min-height:120px}
.nt-home-ico{font-size:34px;line-height:1;color:#5e0c23}
.nt-home-count{position:absolute;top:8px;right:10px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#5e0c23;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.nt-home .know-tile{position:relative}

/* groups and chips */
.nt-group{margin:0 0 12px}
.nt-glabel{font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;color:#5e0c23;margin:10px 0 6px}
.nt-multi{font-weight:500;letter-spacing:0;text-transform:none;color:#8a7a5a;font-size:11px}
.nt-ctx{font-weight:500;letter-spacing:0;text-transform:none;color:#8a7a5a}
.nt-chips{display:flex;flex-wrap:wrap;gap:6px}
#ntGrapes:not(:empty){margin-bottom:14px}
.nt-chip{appearance:none;-webkit-appearance:none;border:1.5px solid #e3cf9c;background:#fff;color:#5e0c23;border-radius:999px!important;padding:6px 11px;font-family:'Helvetica Neue',Arial,sans-serif;font-size:12.5px;font-weight:600;line-height:1.2;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s,color .12s,border-color .12s}
.nt-chip:active{transform:scale(.97)}
.nt-chip.on{background:#5e0c23;border-color:#5e0c23;color:#fff}
.nt-chip.typ{border-color:#c9a550;box-shadow:0 0 0 1px #c9a550 inset}
.nt-chip.typ::before{content:'★ ';color:#c9a550;font-size:10px}
.nt-chip.typ.on::before{color:#f3d98a}
.nt-typical{padding:8px 10px;border:1.5px dashed #c9a550;border-radius:12px;background:#fdf8f0}
.nt-typical .nt-glabel{margin-top:0;color:#8a6a1a}

/* aroma families */
.nt-fam{border:1.5px solid #e3cf9c;border-radius:12px;background:#fdf8f0;margin:0 0 7px;padding:0 10px}
.nt-fam summary{list-style:none;cursor:pointer;padding:9px 0;font-size:12.5px;font-weight:700;color:#5e0c23;letter-spacing:.6px;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between;-webkit-tap-highlight-color:transparent}
.nt-fam summary::-webkit-details-marker{display:none}
.nt-fam summary::after{content:'›';font-size:18px;transform:rotate(90deg);transition:transform .15s;color:#c9a550;margin-left:8px}
.nt-fam[open] summary::after{transform:rotate(-90deg)}
.nt-fam .nt-chips{padding:0 0 10px}
.nt-fam-n{margin-left:auto;margin-right:6px;min-width:18px;height:18px;border-radius:9px;background:#5e0c23;color:#fff;font-size:10.5px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.nt-fam-n:empty{display:none}

/* nav */
.nt-nav{display:flex;gap:10px;margin:18px 0 4px}
.nt-btn{flex:1;appearance:none;-webkit-appearance:none;border-radius:999px!important;padding:12px 14px;font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:center}
.nt-btn-main{background:#5e0c23;color:#fff;border:1.5px solid #5e0c23}
.nt-btn-main:disabled{opacity:.4;cursor:default}
.nt-btn-ghost{background:#fff;color:#5e0c23;border:1.5px solid #c9a550}
.nt-btn-danger{background:#fff;color:#a4162e;border:1.5px solid #a4162e}
.nt-btn:active:not(:disabled){transform:scale(.98)}

/* type tiles */
.nt-types{flex-wrap:wrap;justify-content:center;gap:8px}
.nt-types .wine-color-btn{flex:0 0 calc(33.33% - 8px);max-width:none;border:2px solid transparent;min-width:0}
.nt-types .wine-color-btn-label{font-size:clamp(11.5px,3.5vw,14px);letter-spacing:.4px;white-space:normal;overflow-wrap:normal;word-break:keep-all;line-height:1.15;margin-top:4px}
html[lang="ru"] .nt-types .wine-color-btn-label{font-size:clamp(9.5px,3vw,12px);letter-spacing:.2px}
.nt-ttl{font-size:20px;letter-spacing:1.6px}
#notesOverlay .quiz-modal-inner{padding-top:4px}
#notesOverlay .nt-steps{margin-top:0}
/* The title sits at the top like the Academy's (the overlay's centring spacer is switched off),
   under the notch on the phone. */
html #notesOverlay{padding-top:calc(24px + env(safe-area-inset-top,0px))}
#notesOverlay::before{margin-top:0}
#notesOverlay .quiz-screen-title{margin-bottom:18px}
/* Home: no white card — the two buttons and the intro sit straight on the burgundy. */
#notesOverlay.nt-home-mode .quiz-modal{background:transparent;border-color:transparent;box-shadow:none;animation:none}
#notesOverlay.nt-home-mode .nt-intro{color:#e8d5a0;font-size:14px;margin:0 0 18px}
#notesOverlay.nt-home-mode .nt-home .know-tile{min-height:132px;box-shadow:0 8px 24px rgba(0,0,0,.28)}
#notesOverlay.nt-home-mode .know-back{background:transparent;color:#e8d5a0;border-color:#c9a550;margin-top:22px}
#notesOverlay.nt-home-mode .know-back:active{background:rgba(255,255,255,.08)}
.nt-types .wine-color-btn.on{border-color:#c9a550;background:#fdf3dc}
.nt-t-champ_rose img{filter:hue-rotate(300deg) saturate(1.6)}

/* country / appellation search with dropdown */
.nt-search-wrap{position:relative;margin:0 0 8px}
.nt-country-inp{padding-left:14px}
.nt-dd{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto;margin-top:4px;border-radius:12px;background:#fff}
.nt-dd:empty{display:none}
.nt-dd-item{appearance:none;-webkit-appearance:none;text-align:left;border:none;border-bottom:1px solid #f1e8d2;background:#fff;color:#5e0c23;border-radius:0!important;padding:10px 12px;font-size:14px;font-family:'Helvetica Neue',Arial,sans-serif;cursor:pointer;box-shadow:none!important;filter:none}
.nt-dd-item:last-child{border-bottom:none}
.nt-dd{border:1.5px solid #e3cf9c;overflow:hidden;gap:0}
.nt-dd-item.on{background:#fdf3dc;font-weight:700}
.nt-dd-free{font-size:11.5px;color:#8a7a5a;padding:6px 12px;font-style:italic}
.nt-check{display:flex;align-items:center;gap:8px;font-size:13px;color:#5e0c23;margin:6px 0 4px;cursor:pointer}
.nt-check input{width:18px;height:18px;accent-color:#5e0c23}
.nt-sel{width:100%;margin-bottom:8px}
.nt-inp{width:100%;box-sizing:border-box;margin-bottom:8px}
.nt-inp-short{max-width:120px}
.nt-fields-row{display:flex;gap:8px}
.nt-fields-row .nt-inp{flex:1;min-width:0}
.nt-fields-row .nt-inp-short{flex:0 0 110px;max-width:110px}
.nt-inp-grey{background:#f3f0ea!important;border-color:#d9d2c4!important;color:#5e0c23}
.nt-inp-grey::placeholder{color:#9a8f80;font-style:italic}
.nt-area{width:100%;box-sizing:border-box;min-height:72px;resize:vertical;margin:6px 0 4px;font-family:'Helvetica Neue',Arial,sans-serif;font-size:13.5px}
.nt-levels .nt-chip{text-transform:none}

/* photo */
.nt-photo-frame{position:relative;width:min(225px,46vw);aspect-ratio:3/4;margin:0 auto 10px;border-radius:14px;background:#efeae1;border:1.5px solid #e3cf9c;display:flex;align-items:center;justify-content:center;overflow:hidden}
.nt-photo-frame img{width:100%;height:100%;object-fit:cover}
.nt-bottle{height:70%;width:auto;opacity:.85}
.nt-photo-names{position:absolute;top:0;left:0;right:0;padding:10px 12px;background:linear-gradient(rgba(94,12,35,.92),rgba(94,12,35,0));color:#fff;text-align:center;z-index:2}
.nt-photo-names b{display:block;font-size:14px;letter-spacing:.5px}
.nt-photo-names span{display:block;font-size:12.5px;opacity:.9}
.nt-photo-busy{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.92);color:#5e0c23;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px;z-index:2}
.nt-spin{width:12px;height:12px;border:2px solid #e3cf9c;border-top-color:#5e0c23;border-radius:50%;animation:ntSpin .8s linear infinite}
@keyframes ntSpin{to{transform:rotate(360deg)}}
.nt-photo-btns{display:flex;gap:8px;margin:0 0 10px}
.nt-file{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:.8px;font-size:11.5px;line-height:1.2;padding:10px 8px}
.nt-file input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}

/* rating */
.nt-rate{display:flex;align-items:center;gap:14px}
.nt-stars{display:inline-flex;gap:2px;color:#e3cf9c;font-size:15px;line-height:1}
.nt-stars.small{font-size:12px}
.nt-stars.big{font-size:30px;gap:4px}
.nt-star{color:#e3cf9c}
.nt-star.on{color:#c9a550}
.nt-stars.big .nt-star{appearance:none;-webkit-appearance:none;background:none;border:none;padding:0 2px;cursor:pointer;font-size:30px;line-height:1;border-radius:0!important}
.nt-heart{appearance:none;-webkit-appearance:none;background:#fff;border:1.5px solid #e3cf9c;color:#e3cf9c;width:40px;height:40px;border-radius:50%!important;font-size:20px;line-height:1;cursor:pointer}
.nt-heart.on{color:#fff;background:#a4162e;border-color:#a4162e}
.nt-coeur{color:#a4162e}

/* list */
.nt-list{display:flex;flex-direction:column;gap:8px}
.nt-row{appearance:none;-webkit-appearance:none;display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:#fff;border:1.5px solid #e3cf9c;border-radius:14px!important;padding:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;font-family:'Helvetica Neue',Arial,sans-serif}
.nt-row:active{background:#fdf3dc}
.nt-row-thumb{flex:none;width:52px;height:64px;border-radius:10px;overflow:hidden;background:#efeae1;display:flex;align-items:center;justify-content:center}
.nt-row-thumb img{width:100%;height:100%;object-fit:cover}
.nt-row-thumb .nt-row-glass{width:60%;height:60%;object-fit:contain}
.nt-row-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.nt-row-name{font-size:14px;font-weight:700;color:#5e0c23;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-row-name em{font-style:normal;font-weight:500;color:#8a7a5a}
.nt-row-sub{font-size:12px;color:#6a5a4a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-row-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:#8a7a5a}
.nt-row-date{margin-left:auto}
.nt-empty{text-align:center;color:#8a7a5a;font-size:13.5px;padding:26px 10px;line-height:1.5}
.nt-loading{text-align:center;color:#8a7a5a;padding:20px}

/* detail */
.nt-detail-head{display:flex;gap:12px;align-items:flex-start;margin:0 0 6px}
.nt-detail-photo{flex:none;width:110px;height:146px;border-radius:12px;object-fit:cover;background:#efeae1;border:1.5px solid #e3cf9c;display:flex;align-items:center;justify-content:center}
.nt-detail-photo.nt-ph img{width:55%;height:55%;object-fit:contain}
.nt-detail-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.nt-detail-type{font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:700;color:#8a6a1a}
.nt-detail-place{font-size:13.5px;color:#5e0c23;font-weight:600}
.nt-lvl{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:999px;border:1px solid #c9a550;color:#8a6a1a;vertical-align:middle}
.nt-detail-grapes{font-size:12.5px;color:#6a5a4a}
.nt-detail-rating{margin-top:4px;font-size:16px}
.nt-sum-sec .know-sub{margin:14px 0 4px;font-size:14px}
.nt-sum-line{display:flex;gap:10px;font-size:13px;padding:4px 0;border-bottom:1px solid #f1e8d2}
.nt-sum-l{flex:0 0 38%;color:#8a7a5a;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;padding-top:1px}
.nt-sum-v{flex:1;color:#3a2a1a}
.nt-sum-free{font-size:13px;color:#3a2a1a;font-style:italic;padding:6px 0;line-height:1.45}

/* RU display face runs wider */
html[lang="ru"] .nt-step-title{font-size:15px;letter-spacing:1.2px}