:root {
    --blue:#299fdb;
    --heading:#3688b6;
    --text:#606060;
    --border:#ddd;
    --panel:#f5f5f5
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    font:14px/1.4 Arial,Helvetica,sans-serif;
    color:var(--text);
    background:#fff
}

a {
    color:var(--blue);
    text-decoration:none
}

a:hover {
    text-decoration:underline
}

button,input,select,textarea {
    font:inherit
}

button,a,input,select,textarea {
    touch-action:manipulation
}

button {
    cursor:pointer
}

button:focus-visible,a:focus-visible,summary:focus-visible {
    outline:3px solid #146fa0;
    outline-offset:3px
}

input,select,textarea {
    width:100%;
    border:1px solid var(--border);
    border-radius:3px;
    background:#fff;
    color:#606060;
    padding:7px 9px;
    min-width:0;
    box-shadow:inset 0 1px 2px #00000009
}

input:disabled {
    background: #eee;
    color: #606060;
}

input:focus,select:focus,textarea:focus {
    outline:0;
    border-color:#70bdf1;
    box-shadow:0 0 5px #76b8ef88
}

input[type=checkbox] {
    width:auto;
    box-shadow:none
}

textarea {
    resize:vertical
}

main {
    padding:0 20px 30px
}

.navbar {
    display:flex;
    align-items:center;
    gap:22px;
    padding:10px 20px;
    border-bottom:1px solid #e4e4e4;
    background:#fafafa;
    min-height:58px
}

.brand {
    font-size:19px;
    color:#3688b6;
    white-space:nowrap
}

.brand span {
    color:#678d3e
}

.nav-links {
    display:flex;
    align-items:center;
    gap:3px;
    flex-wrap:wrap;
    flex:1
}

.nav-links a {
    padding:7px 8px;
    border-radius:3px;
    color:#666;
    font-size:13px
}

.nav-links a.active {
    background:#e1f1fb;
    color:#2289c5
}

.navbar form {
    margin:0
}

.page-heading {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    padding:18px 0 24px
}

h1 {
    color:var(--heading);
    font-size:29px;
    font-weight:400;
    margin:0
}

h2 {
    font-weight:400
}

.icon {
    display:inline-block;
    width:18px;
    height:18px;
    flex-shrink:0;
    vertical-align:-3px
}

.small .icon {
    width:16px;
    height:16px
}

.btn {
    border:1px solid transparent;
    border-radius:3px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-height:36px;
    padding:7px 12px;
    color:white;
    white-space:nowrap;
    text-decoration:none;
    line-height:1.35
}

.btn:hover {
    filter:brightness(.96);
    text-decoration:none
}

.blue {
    background:linear-gradient(#50b6e8,#169bdf)
}

.red {
    background:linear-gradient(#ee2631,#bd1420)
}

.gray {
    background:#ccc;
    color:#292929
}

.green {
    background:linear-gradient(#8fc54c,#65952d);
    font-weight:bold
}

.small {
    padding:5px 10px;
    font-size:12px;
    min-height:29px
}

.large {
    height:53px;
    font-size:18px;
    width:100%
}

.button-group {
    display:flex;
    align-items:center;
    flex-shrink:0
}

.button-group .btn {
    border-radius:0
}

.button-group>:first-child,.button-group>:first-child .btn {
    border-radius:3px 0 0 3px
}

.button-group>:last-child,.button-group>:last-child .btn {
    border-radius:0 3px 3px 0
}

.button-group form {
    margin:0
}

.search-panel {
    background:var(--panel);
    border:1px solid #e5e5e5;
    border-radius:3px;
    padding:10px 9px;
    box-shadow:inset 0 1px 1px #00000004
}

.search-form {
    display:flex;
    gap:28px;
    align-items:flex-end
}

.search-form>label:first-child {
    width:16%;
    min-width:155px
}

.search-form label,.catalog-search label {
    font-weight:bold;
    display:block
}

.search-form select,.search-form input {
    height:36px;
    margin-top:4px;
    font-weight:400
}

.blue-select {
    background:linear-gradient(#50b6e8,#169bdf);
    color:white;
    border-color:#50b6e8
}

.blue-select option {
    background:white;
    color:#444
}

.search-query {
    flex:1;
    min-width:100px
}

.search-input {
    display:flex;
    align-items:flex-end
}

.search-input input {
    border-radius:3px 0 0 3px
}

.search-input .btn {
    border-radius:0;
    padding:7px 11px
}

.search-input>:last-child {
    border-radius:0 3px 3px 0
}

.search-tools {
    display:flex;
    gap:9px;
    align-items:center
}

.search-tools select {
    margin:0
}

.stock-toggle {
    white-space:nowrap;
    font-size:12px
}

.stock-toggle input {
    vertical-align:middle;
    margin:0;
    height:16px
}

.stats {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:14px;
    font-size:13px
}

.stats b {
    background:#fafafa;
    border:1px solid #e8e8e8;
    border-radius:3px;
    padding:3px 6px;
    font-size:14px
}

.pagination-row {
    display:flex;
    justify-content:space-between;
    gap:15px;
    align-items:center;
    margin:18px 0 4px;
    font-weight:bold;
    font-size:13px
}

.pagination {
    display:flex;
    align-items:center
}

.pagination span {
    margin-right:10px
}

.pagination a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:5px 10px;
    border:1px solid #e8e8e8;
    font-weight:400;
    background:white
}

.pagination a.current {
    background:#ccc;
    color:#444;
    font-weight:bold
}

.wine-row {
    display:grid;
    grid-template-columns:17% 1fr;
    min-height:218px;
    padding:14px 18px;
    border-top:1px solid #e8e8e8
}

.wine-row:nth-child(odd) {
    background:#f7f7f7
}

.wine-row:hover {
    background:#f0f4fc
}

.wine-picture img {
    width:90px;
    height:176px;
    object-fit:contain;
    object-position:center;
    background:white;
    box-shadow:4px 6px 10px #0003
}

.wine-heading {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
    min-height:36px
}

.wine-heading h2 {
    font-size:18px;
    color:var(--heading);
    margin:0;
    flex:1;
    line-height:1.3
}

.wine-heading h2 span,.vintage span {
    color:#31a7e8
}

.vintage {
    font-size:18px;
    color:var(--heading);
    white-space:nowrap
}

.wine-details {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px
}

.wine-details dl {
    display:grid;
    grid-template-columns:125px minmax(0,1fr);
    align-content:start;
    margin:0;
    gap:0 7px;
    line-height:1.45;
    font-size:13px
}

.wine-details dt {
    font-weight:bold;
    color:#2ca5e5
}

.wine-details dt.neutral {
    color:#555;
    align-self:center
}

.wine-sort {
    color:inherit;
    text-decoration:none
}

.wine-sort:hover,.wine-sort:focus-visible,.wine-sort.active {
    text-decoration:underline;
    text-underline-offset:3px
}

.wine-sort .sort-indicator {
    width:13px;
    height:13px;
    margin-left:3px;
    vertical-align:-2px
}

.wine-details dd {
    margin:0;
    min-height:19px;
    overflow-wrap:anywhere
}

.inline-edit {
    color:inherit
}

.note {
    position:relative
}

.note summary {
    list-style:none;
    width:max-content
}

.note summary::-webkit-details-marker {
    display:none
}

.note[open]>div {
    position:absolute;
    z-index:5;
    top:34px;
    left:0;
    width:350px;
    max-width:80vw;
    max-height:330px;
    overflow:auto;
    background:white;
    white-space:pre-wrap;
    box-shadow:0 3px 14px #0003;
    border:1px solid #ddd;
    padding:16px;
    color:#555;
    font-weight:400
}

.wine-details dl:last-child .note[open]>div {
    left:auto;
    right:0
}

.form-title {
    text-align:center;
    font-size:19px;
    margin:14px 0 5px
}

.editor {
    background:var(--panel);
    border:1px solid #e3e3e3;
    border-radius:4px;
    padding:16px 24px;
    margin:0 auto;
    max-width:820px
}

.wine-editor {
    max-width:820px
}

.form-actions {
    display:flex;
    justify-content:center;
    gap:6px;
    margin:0 0 12px
}

.form-actions:last-child {
    margin:20px 0 0
}

.field {
    margin-bottom:13px;
    min-width:0
}

.field label {
    display:block;
    font-size:12px;
    font-weight:bold;
    margin-bottom:4px
}

.field .relation-label {
    color:#2ca5e5
}

.field input,.field select,.field textarea {
    font-size:12px;
    min-height:29px;
    padding:5px 7px
}

.field small {
    display:block;
    font-size:11px;
    margin-top:5px
}

.field .check {
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:10px
}

.field .check input {
    min-height:0
}

.form-grid {
    display:grid;
    gap:0 18px
}

.four {
    grid-template-columns:repeat(4,minmax(0,1fr))
}

.two {
    grid-template-columns:repeat(2,minmax(0,1fr))
}

.wide {
    grid-column:1/-1
}

.wine-form-top {
    display:grid;
    grid-template-columns:170px 1fr;
    gap:25px
}

.form-bottle {
    display:block;
    width:112px;
    height:210px;
    object-fit:contain;
    margin-bottom:15px;
    background:white
}

.picture-field input {
    font-size:11px;
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
    max-width:165px
}

.picture-field input::file-selector-button {
    border:0;
    border-radius:3px;
    background:#2ca5e5;
    color:white;
    padding:8px 7px;
    cursor:pointer
}

.catalog-search {
    display:flex;
    gap:9px;
    align-items:flex-end
}

.catalog-search label {
    flex:1
}

.catalog-search input {
    margin-top:5px
}

.records-table {
    width:100%;
    border-collapse:collapse
}

.records-table th {
    text-align:left;
    background:#f1f1f1;
    color:#369ed7
}

.records-table th,.records-table td {
    padding:13px;
    border-bottom:1px solid #e5e5e5;
    vertical-align:top
}

.records-table tbody tr:nth-child(even) {
    background:#f7f7f7
}

.records-table tbody tr:hover {
    background:#eef4fc
}

.table-scroll {
    overflow-x:auto
}

.geography-search label {
    display:block;
    font-weight:bold;
    margin-bottom:6px
}

.geography-search-input {
    position:relative
}

.geography-search-input>.icon {
    position:absolute;
    left:14px;
    top:15px;
    pointer-events:none
}

.geography-search-input input {
    min-height:48px;
    padding-left:42px;
    font-size:16px
}

.geography-search-status {
    min-height:18px;
    margin:6px 0 0;
    font-size:12px
}

.geography-path {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    min-height:44px;
    margin-bottom:12px
}

.geography-path [aria-current] {
    font-weight:bold
}

.geography-browser {
    display:flex;
    overflow-x:auto;
    min-height:420px;
    height:65vh;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--panel);
    scroll-snap-type:x proximity
}

.geography-column {
    flex:0 0 25%;
    min-width:280px;
    display:flex;
    flex-direction:column;
    background:white;
    border-right:1px solid var(--border);
    scroll-snap-align:start
}

.geography-column-heading {
    padding:14px 12px;
    border-bottom:1px solid #e8e8e8;
    background:#fafafa
}

.geography-column-heading h2 {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:15px;
    color:var(--heading);
    margin:0 0 10px
}

.geography-column-heading h2 span {
    color:var(--text);
    font-size:12px;
    font-weight:normal
}

.geography-list {
    list-style:none;
    padding:6px;
    margin:0;
    overflow-y:auto;
    flex:1
}

.geography-row {
    display:flex;
    align-items:center;
    border-radius:4px;
    margin:2px 0
}

.geography-row:hover {
    background:#f0f4fc
}

.geography-row.selected {
    background:#dceefa;
    box-shadow:inset 3px 0 var(--blue)
}

.geography-select {
    display:flex;
    align-items:center;
    gap:4px;
    flex:1;
    min-width:0;
    padding:10px 6px 10px 10px;
    color:#3e5664
}

.geography-select:hover {
    text-decoration:none
}

.geography-name {
    flex:1;
    min-width:0;
    overflow-wrap:anywhere
}

.geography-name small {
    display:block;
    margin-top:2px;
    color:#6b7378;
    font-size:11px
}

.geography-match-preview>span {
    display:block;
    margin-top:5px;
    font-size:11px;
    color:#68717a
}

.geography-browser mark,.geography-path mark {
    background:#ffdf80;
    color:#493600;
    border-radius:2px
}

.geography-actions {
    display:flex;
    gap:2px;
    padding-right:4px
}

.geography-action {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:30px;
    height:32px;
    padding:0;
    border:0;
    border-radius:3px;
    background:transparent;
    color:#277ca9
}

.geography-action.delete {
    color:#b4443e
}

.geography-action:hover {
    background:#fff;
    box-shadow:0 0 0 1px var(--border)
}

.geography-empty {
    padding:20px 14px;
    margin:0;
    color:#777
}

.geography-list:empty {
    flex:0
}

.geography-browser [hidden] {
    display:none
}

@media(max-width:700px) {
    .geography-column {
        flex-basis:85%;
        min-width:260px
    }
}

.empty {
    padding:50px;
    text-align:center;
    color:#777
}

.empty h2 {
    color:#3688b6
}

.alert {
    padding:12px 18px;
    margin:14px auto;
    max-width:1000px;
    border:1px solid;
    border-radius:3px
}

.alert ul {
    margin:7px 0 0;
    padding-left:20px
}

.success {
    background:#f0f8e9;
    border-color:#b5d99a;
    color:#4b732c
}

.error {
    background:#fff1f0;
    border-color:#eab4b4;
    color:#a73535
}

.field-error {
    display:block;
    font-size:12px;
    color:#b02c2c;
    margin-top:3px
}

.read-notice {
    text-align:center;
    background:#e9f4fc;
    color:#2879a8;
    padding:5px;
    font-size:12px
}

.login-page {
    background:#ddd;
    min-height:100vh
}

.login-panel {
    width:470px;
    max-width:100%;
    margin:44px auto;
    background:white;
    border:1px solid #e3e3e3;
    border-radius:4px;
    box-shadow:0 1px 1px #00000008
}

.login-panel header {
    text-align:center;
    font-size:15px;
    font-weight:bold;
    padding:11px;
    background:#f5f5f5;
    border-bottom:1px solid #e6e6e6
}

.login-form {
    padding:27px 30px 30px
}

.login-bottle {
    height:80px;
    width:65px;
    object-fit:contain;
    display:block;
    margin:3px auto 9px
}

.input-group {
    display:flex;
    margin-top:20px
}

.input-group>span:not(.sr-only) {
    width:39px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eee;
    border:1px solid #ddd;
    border-radius:4px 0 0 4px;
    font-size:19px
}

.input-group input {
    height:38px;
    border-left:0;
    border-radius:0 4px 4px 0
}

.reset-link {
    display:block;
    margin:21px 0;
    border:0;
    padding:0;
    background:none;
    font-weight:bold;
    color:#555
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

.compact .wine-details {
    display:none
}

.compact .wine-row {
    min-height:70px;
    grid-template-columns:65px 1fr
}

.compact .wine-picture img {
    width:25px;
    height:50px;
    box-shadow:none
}

.compact .wine-heading {
    margin-bottom:0
}

@media(min-width:1800px) {
    .wine-row {
        min-height:224px
    }
    .wine-details dl {
        grid-template-columns:130px 1fr;
        font-size:14px
    }
    .wine-heading h2,.vintage {
        font-size:19px
    }
}

@media(max-width:1300px) {
    .wine-row {
        grid-template-columns:125px 1fr
    }
    .wine-details {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:15px
    }
    .search-form {
        gap:14px;
        flex-wrap:wrap
    }
    .search-tools {
        margin-left:auto
    }
    .navbar {
        gap:15px;
        align-items:flex-start
    }
    .wine-heading {
        margin-bottom:17px
    }
}

@media(max-width:700px) {
    main {
        padding:0 12px 25px
    }
    .navbar {
        flex-wrap:wrap;
        padding:10px 12px;
        gap:8px
    }
    .nav-links {
        order:3;
        flex-basis:100%;
        flex-wrap:nowrap;
        overflow:auto;
        padding-bottom:4px
    }
    .nav-links a {
        white-space:nowrap
    }
    .navbar>form {
        margin-left:auto
    }
    .page-heading {
        padding:20px 0;
        gap:12px
    }
    h1 {
        font-size:25px
    }
    .search-form>label:first-child {
        width:100%
    }
    .search-query {
        flex-basis:100%
    }
    .search-tools {
        width:100%;
        justify-content:space-between;
        flex-wrap:wrap
    }
    .pagination-row {
        align-items:flex-start;
        flex-direction:column;
        gap:8px
    }
    .pagination a {
        padding:4px 8px
    }
    .wine-row {
        grid-template-columns:65px 1fr;
        padding:15px 7px
    }
    .wine-picture img {
        width:47px;
        height:100px
    }
    .wine-heading {
        flex-wrap:wrap;
        gap:9px
    }
    .wine-heading .button-group {
        order:3;
        flex-basis:100%
    }
    .wine-heading h2 {
        font-size:17px;
        flex-basis:60%
    }
    .vintage {
        font-size:14px
    }
    .wine-details {
        grid-template-columns:1fr;
        gap:12px
    }
    .wine-details dl {
        grid-template-columns:120px 1fr
    }
    .note[open]>div {
        position:fixed;
        top:30%;
        left:10%!important;
        right:auto!important;
        width:80vw;
        max-height:45vh
    }
    .editor {
        padding:15px
    }
    .wine-form-top {
        grid-template-columns:1fr;
        gap:0
    }
    .picture-field {
        display:flex;
        flex-direction:column;
        align-items:center
    }
    .form-bottle {
        height:150px;
        width:80px
    }
    .four,.two {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:0 12px
    }
    .form-title {
        font-size:17px;
        padding:10px
    }
    .login-panel {
        margin:30px auto
    }
    .login-form {
        padding:24px
    }
    .catalog-search {
        flex-wrap:wrap
    }
    .catalog-search label {
        flex-basis:100%
    }
}

@media print {
    .navbar,.page-heading .btn,.search-panel,.button-group,.pagination-row,.read-notice {
        display:none
    }
    .wine-row {
        break-inside:avoid;
        grid-template-columns:100px 1fr
    }
    .wine-details {
        grid-template-columns:repeat(4,1fr)
    }
    .wine-details dl {
        grid-template-columns:1fr
    }
    .wine-heading {
        margin-bottom:10px
    }
    .note summary {
        display:none
    }
    main {
        padding:0
    }
    .wine-picture img {
        box-shadow:none
    }
}