/* Готовые узоры интерфейса — сняты с планера (канбан, окно задачи, шторка).
   Подключать после ui.css: <link rel="stylesheet" href="/static/ui/patterns.css">. Цвета только через переменные ui.css. */

/* Плашка списка: метка, название, строка значков. Нажатие открывает окно (UI.view). */
.tile{display:block;width:100%;text-align:left;border:0;color:var(--ink);background:var(--card);border-radius:12px;padding:10px 12px;margin:0 0 8px;
  box-shadow:0 1px 2px rgba(23,32,26,.12);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;font:inherit}
.tile:active{background:var(--cardhi)}
.tile-label{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:650;line-height:1;
  padding:4px 7px;border-radius:6px;margin-bottom:6px;background:rgb(var(--a1) / .22);color:var(--tint)}
.tile-title{font-size:15px;font-weight:500;line-height:1.35;overflow-wrap:anywhere}
.tile-badges{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:7px;color:var(--sub);font-size:12px;font-weight:500}
.tile-badges>span{display:inline-flex;align-items:center;gap:4px}
.tile-badges .ok{color:#fff;background:var(--green);border-radius:4px;padding:1px 5px}
.ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Кружок-отметка */
.chk{width:22px;height:22px;border-radius:50%;border:2px solid var(--sub);background:none;padding:0;flex:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.chk.on{background:var(--green);border-color:var(--green)}
.chk.on::after{content:"";width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}

/* Нижняя шторка: короткие формы и выбор (UI.sheet) */
#ui-sheet{position:fixed;inset:0;z-index:20;display:none;background:rgba(3,4,10,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#ui-sheet.on{display:block}
#ui-sheet .box{position:absolute;left:0;right:0;bottom:0;max-width:760px;margin:0 auto;background:var(--sheetbg);border-top:1px solid var(--line);border-radius:26px 26px 0 0;
  padding:22px 18px calc(22px + env(safe-area-inset-bottom));max-height:90vh;overflow:auto;overscroll-behavior:contain;animation:ui-up .25s ease}
#ui-sheet .box::before{content:"";display:block;width:38px;height:5px;border-radius:3px;background:var(--line);margin:-10px auto 14px}
#ui-sheet h3{margin:0 0 12px;font:700 20px var(--font)}
#ui-sheet input:not([type=checkbox]):not([type=radio]),#ui-sheet textarea,#ui-sheet select{width:100%;font-size:16px}
@keyframes ui-up{from{transform:translateY(40px);opacity:.4}}

/* Окно на весь экран: подробности объекта (UI.view) — как карточка Trello на iPhone */
#ui-view{position:fixed;inset:0;z-index:18;background:var(--bg);display:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(24px + env(safe-area-inset-bottom))}
#ui-view.on{display:block;animation:ui-up .2s ease}
body.ui-view-open{overflow:hidden}
body.ui-view-open nav{visibility:hidden}
body.ui-sheet-open .app-nav{visibility:hidden}
#ui-sheet{z-index:40}
#ui-view{z-index:35}
.chips button,.chips.grid3 button{min-height:44px;height:auto}
@media(prefers-reduced-motion:reduce){#ui-view.on,#ui-sheet .box{animation:none}}
.v-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:calc(6px + env(safe-area-inset-top)) 8px 6px;background:var(--sheetbg);border-bottom:1px solid var(--line)}
.v-x{width:44px;height:44px;border:0;background:none;color:var(--ink);display:flex;align-items:center;justify-content:center;border-radius:12px}
.v-x:active{background:var(--ctl)}
.v-x .ic,.v-sec>.ic{width:22px;height:22px;stroke-width:1.8}
.v-crumb{flex:1;text-align:center;font-weight:650;color:var(--sub);font-size:14px}
.v-head,.v-sec,.v-actions{max-width:760px;margin-left:auto;margin-right:auto}
.v-head{display:flex;gap:12px;align-items:flex-start;padding:18px 16px 14px;border-bottom:1px solid var(--line)}
.v-head .chk{margin-top:6px}
.v-title{flex:1;border:0;background:none;color:var(--ink);font:700 22px/1.3 var(--font);resize:none;outline:none;padding:0;overflow:hidden;margin:0}
textarea.v-title:focus{background:var(--ctl);border-radius:8px;box-shadow:0 0 0 6px var(--ctl)}
.v-sec{display:flex;gap:14px;align-items:flex-start;padding:16px;border-bottom:1px solid var(--line);color:var(--sub)}
.v-body{flex:1;min-width:0;color:var(--ink)}
.v-label{font-size:13px;font-weight:600;color:var(--sub);margin-bottom:8px}
.v-placeholder{border:0;background:none;color:var(--sub);font:inherit;padding:0;text-align:left;cursor:pointer}
.v-actions{display:flex;gap:8px;padding:18px 16px}.v-actions .btn:first-child{flex:1}

/* Кнопки-чипы выбора (колонка, время, вариант) */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{height:36px;padding:0 12px;border:0;border-radius:12px;background:var(--ctl);color:var(--ink);font:600 13px var(--font)}
.chips button.on{background:rgb(var(--a1));color:#fff}
.chips.grid3{display:grid;grid-template-columns:repeat(3,1fr)}.chips.grid3 button{height:40px}

/* Тост над нижним меню */
#ui-toast{position:fixed;left:16px;right:16px;max-width:460px;margin:0 auto;bottom:calc(92px + env(safe-area-inset-bottom));z-index:30;
  background:var(--sheetbg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.35);font-weight:600}
#ui-toast[hidden]{display:none}
html[data-mode=dark] .tile{box-shadow:0 1px 0 rgba(0,0,0,.25)}