/* Publisher dashboard and sign-in. Same tokens, cards, buttons and motion as the site; mobile first. */

/* ---------------- sign-in ---------------- */
.yd-page--login { background: var(--color-background); }
.yd-signin { padding-block: var(--sp-8); background: var(--color-background); background-image: var(--pat-dots), var(--grad-soft); min-height: 70vh; display: flex; align-items: center; }
.yd-signin-in { width: min(1040px, 100% - 32px); margin-inline: auto; display: grid; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lift, 0 16px 48px rgba(26,34,30,.16)); background: var(--color-surface); }
@media (min-width: 860px) { .yd-signin-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.yd-signin-art { position: relative; padding: var(--sp-8) var(--sp-7); color: #fff; background: radial-gradient(circle at 88% 0%, rgba(217,164,65,.30), transparent 46%), radial-gradient(circle, rgba(255,255,255,.10) 1.6px, transparent 1.9px) 0 0 / 22px 22px, var(--grad-primary); display: flex; flex-direction: column; gap: var(--sp-4); }
.yd-signin-logo { width: 170px; max-width: 60%; background: rgba(255,255,255,.94); padding: 10px 14px; border-radius: var(--radius-lg); }
.yd-signin-art h2 { color: #fff; font-size: var(--h2); line-height: var(--lh-tight); margin-top: var(--sp-4); }
.yd-signin-art > p { color: rgba(255,255,255,.88); font-size: var(--lead); }
.yd-signin-art ul { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.yd-signin-art li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--small); font-weight: 600; }
.yd-signin-art li .btn-ic { flex: none; padding: 8px; box-sizing: content-box; width: 20px; height: 20px; border-radius: 10px; background: rgba(255,255,255,.14); color: var(--gold-light); }
@media (max-width: 859px) { .yd-signin-art { padding: var(--sp-6); } .yd-signin-art ul { display: none; } .yd-signin-art h2 { font-size: var(--h3); margin-top: var(--sp-2); } }
.yd-signin-card { padding: var(--sp-8) var(--sp-7); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 559px) { .yd-signin-card { padding: var(--sp-6) var(--sp-5); } }
.yd-signin-card h1 { font-size: var(--h2); line-height: var(--lh-tight); }
.yd-sub { color: var(--color-muted); font-size: var(--small); margin: var(--sp-2) 0 var(--sp-5); }
.yd-alert { margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--color-secondary); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: rgba(168,81,45,.1); color: #7E3F20; font-weight: 600; font-size: var(--small); }
.yd-form { display: grid; gap: var(--sp-2); }
.yd-form label { font-weight: 700; font-size: var(--small); margin-top: var(--sp-2); }
.yd-form input[type="text"], .yd-form input[type="password"] { width: 100%; min-height: 48px; font: inherit; font-size: 1rem; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-background); color: var(--color-text); }
.yd-form input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(217,164,65,.28); }
.yd-pass { position: relative; }
.yd-pass input { padding-right: 52px !important; }
.yd-pass button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: transparent; color: var(--color-muted); cursor: pointer; border-radius: 8px; display: grid; place-items: center; }
.yd-pass button:hover { color: var(--color-primary); background: var(--green-50); }
.yd-form .yd-remember { display: flex; gap: var(--sp-2); align-items: center; font-weight: 500; color: var(--color-muted); margin-top: var(--sp-3); }
.yd-remember input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.yd-go { width: 100%; margin-top: var(--sp-4); min-height: 50px; }
.yd-forgot, .yd-back-home { text-align: center; margin-top: var(--sp-4); font-size: var(--small); }
.yd-forgot a { color: var(--color-secondary); font-weight: 700; }
.yd-back-home a { color: var(--color-muted); }
.yd-back-home a:hover, .yd-forgot a:hover { text-decoration: underline; }
.yd-notice { max-width: 520px; margin: var(--sp-8) auto; }
.yd-notice h1 { font-size: var(--h3); margin-bottom: var(--sp-2); }
.yd-notice p { color: var(--color-muted); margin-bottom: var(--sp-4); }

/* ---------------- app shell ---------------- */
.yd-wrap { padding-block: var(--sp-6) var(--sp-9); background: var(--color-background); background-image: var(--pat-grid); min-height: 70vh; }
.yd-shell { width: min(1240px, 100% - 32px); margin-inline: auto; }
.yd-card { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-accent); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: var(--sp-6); }
#yd-app { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 960px) { #yd-app { grid-template-columns: 250px minmax(0, 1fr); gap: var(--sp-6); } }

.yd-side-nav { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: var(--sp-4); display: grid; gap: var(--sp-3); }
@media (min-width: 960px) { .yd-side-nav { position: sticky; top: calc(var(--header-h, 100px) + var(--sp-4)); padding: var(--sp-5); } }
.yd-user { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px dashed var(--color-border); }
.yd-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-primary); color: #fff; font-weight: 700; font-size: var(--body); }
.yd-user strong { display: block; line-height: var(--lh-tight); overflow-wrap: anywhere; }
.yd-user small { color: var(--color-muted); font-size: var(--xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.yd-tabs { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; }
.yd-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 960px) { .yd-tabs { flex-direction: column; overflow: visible; } }
.yd-tabs button { flex: none; display: flex; align-items: center; gap: var(--sp-3); padding: 10px 14px; border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--color-muted); font: inherit; font-size: var(--small); font-weight: 700; cursor: pointer; text-align: left; white-space: nowrap; }
.yd-tabs button .btn-ic { color: var(--green-500); }
.yd-tabs button:hover { background: var(--green-50); color: var(--color-primary); }
.yd-tabs button.is-on { background: var(--color-primary); color: #fff; }
.yd-tabs button.is-on .btn-ic { color: var(--gold-light); }
.yd-out { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--small); font-weight: 700; color: var(--color-secondary); text-decoration: none; padding: 6px 14px; }
.yd-out .btn-ic { transform: scaleX(-1); }
.yd-out:hover { text-decoration: underline; }
@media (max-width: 959px) { .yd-user { border-bottom: 0; padding-bottom: 0; } .yd-out { display: none; } }
.yd-content { min-width: 0; }

.yd-loading { padding: var(--sp-6); text-align: center; color: var(--color-muted); }
.yd-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--color-muted); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-xl); }
.yd-empty .btn-ic { color: var(--green-500); }
.yd-h { font-size: var(--h3); margin: var(--sp-6) 0 var(--sp-4); color: var(--color-primary); }

/* overview */
.yd-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-6) var(--sp-7); border-radius: var(--radius-xl); color: #fff; background: radial-gradient(circle at 88% 0%, rgba(217,164,65,.30), transparent 46%), radial-gradient(circle, rgba(255,255,255,.10) 1.6px, transparent 1.9px) 0 0 / 22px 22px, var(--grad-primary); box-shadow: var(--shadow); }
.yd-hero h1 { color: #fff; font-size: var(--h2); line-height: var(--lh-tight); }
.yd-hero p { color: rgba(255,255,255,.88); margin-top: var(--sp-1); }
.yd-quick { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (max-width: 559px) { .yd-hero { padding: var(--sp-5); } .yd-quick .btn { flex: 1 1 auto; } }
.yd-stats { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: var(--sp-5); }
@media (min-width: 760px) { .yd-stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.yd-stat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: var(--sp-5); background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-accent); border-radius: var(--radius-xl); box-shadow: var(--shadow); font: inherit; color: var(--color-text); cursor: pointer; }
div.yd-stat { cursor: default; }
.yd-stat:nth-child(2) { border-top-color: var(--color-secondary); }
.yd-stat:nth-child(3) { border-top-color: var(--green-700); }
.yd-stat .btn-ic { color: var(--color-secondary); margin-bottom: var(--sp-2); }
.yd-stat strong { font-size: var(--h2); line-height: var(--lh-tight); color: var(--color-primary); }
.yd-stat span { font-size: var(--small); color: var(--color-muted); font-weight: 600; }
.yd-stat.is-warm { background: #FBF0D7; }

/* lists */
.yd-bar { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); align-items: center; padding: var(--sp-4); background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-accent); border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.yd-bar input[type="search"] { flex: 1 1 220px; min-width: 0; }
.yd-bar input, .yd-bar select { font: inherit; font-size: 1rem; min-height: 46px; padding: 8px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-background); color: var(--color-text); }
.yd-bar select { width: auto; flex: 0 0 auto; }
.yd-bar .btn { min-height: 46px; }
.yd-list { display: grid; gap: var(--sp-3); }
.yd-row { display: flex; align-items: center; gap: var(--sp-4); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: var(--sp-4); flex-wrap: wrap; }
.yd-row:nth-child(3n+2) { border-left-color: var(--color-secondary); }
.yd-row:nth-child(3n) { border-left-color: var(--green-700); }
.yd-row img, .yd-noimg { flex: none; width: 76px; height: 76px; border-radius: var(--radius-lg); object-fit: cover; background: var(--green-50); }
.yd-row-main { flex: 1 1 240px; min-width: 0; }
.yd-row-main h3 { font-size: var(--body); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.yd-row-main p { margin-top: 4px; font-size: var(--xs); color: var(--color-muted); }
.yd-text { font-size: var(--small) !important; color: var(--color-text) !important; line-height: var(--lh-prose); }
.yd-row-act { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.yd-row-act .btn { min-height: 40px; padding: 0 14px; font-size: var(--small); }
.btn-danger { background: transparent; color: var(--color-secondary); border-color: var(--color-secondary); }
.btn-danger:hover { background: var(--color-secondary); color: #fff; }
@media (max-width: 560px) { .yd-row-act { width: 100%; } .yd-row-act .btn { flex: 1 1 auto; } }
.yd-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--xs); font-weight: 700; }
.yd-badge--draft { background: #EEE9DA; color: var(--color-muted); }
.yd-badge--pending { background: #FBF0D7; color: #7A5410; }
.yd-badge--publish { background: var(--green-100); color: var(--green-700); }
.yd-badge--future { background: #E3EEF2; color: var(--tank); }
.yd-pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-5); color: var(--color-muted); font-size: var(--small); }

/* editor: two columns, publish box on the right */
.yd-edit-head { margin-bottom: var(--sp-5); }
.yd-edit-head h2 { font-size: var(--h2); line-height: var(--lh-tight); margin-top: var(--sp-2); }
.yd-back { background: none; border: 0; color: var(--color-secondary); font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
.yd-back:hover { text-decoration: underline; }
.yd-edit-grid { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 1100px) { .yd-edit-grid { grid-template-columns: minmax(0, 1fr) 320px; } .yd-side { position: sticky; top: calc(var(--header-h, 100px) + var(--sp-4)); } }
.yd-main { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-accent); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: var(--sp-6); min-width: 0; }
@media (max-width: 559px) { .yd-main { padding: var(--sp-5); } }
.yd-side { display: grid; gap: var(--sp-4); }
.yd-card2 { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.yd-card2:first-child { border-top: 4px solid var(--color-accent); }
.yd-card2 h3 { font-size: var(--h4); color: var(--color-primary); }
.yd-card2 .btn { width: 100%; }
.yd-hint { font-size: var(--xs); color: var(--color-muted); line-height: var(--lh-prose); }
.yd-block { margin: var(--sp-5) 0; padding: var(--sp-5); border: 1px solid var(--color-border); border-left: 4px solid var(--color-secondary); border-radius: var(--radius-lg); background: var(--color-background); }
.yd-block h3 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--h4); margin-bottom: var(--sp-3); color: var(--color-primary); }
.yd-f { display: grid; gap: 6px; margin-bottom: var(--sp-4); }
.yd-f label { font-weight: 700; font-size: var(--small); }
.yd-f label em { font-weight: 500; font-style: normal; color: var(--color-muted); }
.yd-f small { color: var(--color-muted); font-size: var(--xs); }
.yd-f input[type="text"], .yd-f input[type="password"], .yd-f input[type="email"], .yd-f input[type="number"], .yd-f input[type="date"], .yd-f input[type="datetime-local"], .yd-f input[type="file"], .yd-f select, .yd-f textarea, .yd-card2 select, .yd-card2 input[type="file"], .yd-card2 textarea { font: inherit; font-size: 1rem; width: 100%; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); }
.yd-block .yd-f input, .yd-block .yd-f select { background: var(--color-surface); }
.yd-f input:focus, .yd-f select:focus, .yd-f textarea:focus, .yd-rte:focus, .yd-card2 select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(217,164,65,.28); }
.yd-grid2 { display: grid; gap: 0 var(--sp-4); grid-template-columns: minmax(0,1fr); }
@media (min-width: 640px) { .yd-grid2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.yd-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.yd-tools button { padding: 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-background); font: inherit; font-size: var(--small); cursor: pointer; }
.yd-tools button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.yd-rte { min-height: 240px; padding: var(--sp-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); line-height: var(--lh-prose); overflow-wrap: anywhere; }
.yd-rte h3 { font-size: var(--h4); margin: var(--sp-3) 0 var(--sp-2); }
.yd-rte ul { list-style: disc; padding-left: 1.4em; }
.yd-rte a { color: var(--color-secondary); text-decoration: underline; }
.yd-photo img { width: 100%; border-radius: var(--radius-lg); display: block; }
.yd-photo-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--sp-5); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); color: var(--color-muted); background: var(--color-background); }
.yd-wa textarea { font-size: var(--small); background: var(--color-background); }
.yd-private { background: var(--green-50); border-left: 4px solid var(--color-accent); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: var(--sp-4); margin-bottom: var(--sp-5); font-size: var(--small); }
.yd-private p { margin-top: 4px; color: var(--color-muted); }
.yd-private .yd-pmsg { color: var(--color-text); line-height: var(--lh-prose); }
.yd-save { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
@media (max-width: 560px) { .yd-save .btn { width: 100%; } }
.yd-edit:not(:has(.yd-edit-grid)) { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-accent); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: var(--sp-6); }
.yd-edit:not(:has(.yd-edit-grid)) .yd-h { margin-top: var(--sp-3); }
.yd-log { display: grid; gap: var(--sp-2); }
.yd-log li { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); font-size: var(--small); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); }
.yd-log small { color: var(--color-muted); }

.yd-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 200; max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 999px; background: var(--color-primary); color: #fff; font-weight: 600; font-size: var(--small); box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: opacity .25s, transform .25s; }
.yd-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.yd-toast.is-bad { background: var(--color-secondary); }

/* sign out visible on phones, and the whole app sits higher */
.yd-out--m { display: none; margin-left: auto; padding: 8px 16px; border: 1px solid var(--color-secondary); border-radius: 999px; }
.yd-out--m:hover { background: var(--color-secondary); color: #fff; text-decoration: none; }
@media (max-width: 959px) { .yd-out--m { display: inline-flex; } }
.yd-wrap { padding-block: var(--sp-3) var(--sp-8); }
@media (max-width: 959px) { .yd-wrap { padding-top: var(--sp-2); } .yd-shell { width: min(1240px, 100% - 24px); } #yd-app { gap: var(--sp-3); } }

/* ticker editor */
.yd-tk-opts { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); align-items: flex-end; margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px dashed var(--color-border); }
.yd-tk-opts label { display: grid; gap: 4px; font-weight: 700; font-size: var(--small); }
.yd-tk-opts small { font-weight: 500; color: var(--color-muted); }
.yd-tk-opts input[type="number"] { width: 110px; font: inherit; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.yd-tk-opts .yd-tk-on { display: flex; align-items: center; gap: var(--sp-2); }
.yd-tk-opts input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-primary); }
.yd-tk-list { display: grid; gap: var(--sp-3); }
.yd-tk-row { display: flex; gap: var(--sp-3); align-items: flex-start; flex-wrap: wrap; padding: var(--sp-3); background: var(--color-background); border: 1px solid var(--color-border); border-left: 4px solid var(--color-secondary); border-radius: var(--radius-lg); }
.yd-tk-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary); color: #fff; font-size: var(--xs); font-weight: 700; margin-top: 8px; }
.yd-tk-in { flex: 1 1 280px; display: grid; gap: var(--sp-2); min-width: 0; }
.yd-tk-in input { width: 100%; font: inherit; font-size: 1rem; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.yd-tk-in input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(217,164,65,.28); }
.yd-tk-act { display: flex; gap: var(--sp-2); }
.yd-tk-act .btn { min-height: 40px; padding: 0 14px; }
@media (max-width: 560px) { .yd-tk-act { width: 100%; } .yd-tk-act .btn { flex: 1 1 auto; } }

/* sponsors */
.yd-spots { display: grid; gap: var(--sp-2); }
.yd-spot { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-background); cursor: pointer; font-weight: 400 !important; }
.yd-spot input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-primary); flex: none; }
.yd-spot strong { display: block; font-size: var(--small); }
.yd-spot small { color: var(--color-muted); font-size: var(--xs); }
.yd-bar .yd-hint { flex: 1 1 240px; }

/* sit higher; the sign-in screen fits on one desktop screen without scrolling */
main.yd-page { margin-top: 0; padding-top: 0; }
.yd-wrap { padding-top: var(--sp-2); }
.yd-signin { padding-block: var(--sp-3); min-height: calc(100svh - var(--header-h, 110px) - 48px); }
.yd-signin-art h2 { margin-top: 0; }
@media (min-width: 860px) {
  .yd-signin-art { padding: var(--sp-6) var(--sp-7); justify-content: center; }
  .yd-signin-card { padding: var(--sp-6) var(--sp-7); }
  .yd-sub { margin-bottom: var(--sp-4); }
  .yd-form input[type="text"], .yd-form input[type="password"] { min-height: 44px; }
  .yd-go { min-height: 46px; margin-top: var(--sp-3); }
  .yd-forgot, .yd-back-home { margin-top: var(--sp-3); }
}
@media (min-width: 860px) and (max-height: 760px) {
  .yd-signin-art ul { display: none; }
  .yd-signin-card h1 { font-size: var(--h3); }
  .yd-back-home { display: none; }
  .yd-signin-art, .yd-signin-card { padding-block: var(--sp-5); }
}

/* the site's "first section" rule (64px top padding) outranked the rules above; override it for these pages */
main.yd-page > section.yd-wrap:first-child { padding-top: var(--sp-2); }
main.yd-page > section.yd-signin:first-child { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
@media (max-width: 959px) { main.yd-page > section.yd-wrap:first-child { padding-top: var(--sp-1); } }

/* Card accent: the curved 4px top border is replaced by a short accent tab sitting inside the card */
.yd-main, .yd-bar, .yd-stat, .yd-card2:first-child, .yd-edit:not(:has(.yd-edit-grid)), .yd-card {
  border: 1px solid var(--color-border);
  background-image: linear-gradient(var(--tab, var(--color-accent)), var(--tab, var(--color-accent)));
  background-repeat: no-repeat; background-size: 56px 4px; background-position: var(--sp-5) 0;
}
.yd-stat:nth-child(2) { --tab: var(--color-secondary); }
.yd-stat:nth-child(3) { --tab: var(--green-700); }
.yd-stat.is-warm { background-color: #FBF0D7; }

/* pending count on a dashboard tab */
.yd-tabs button .yd-n { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; line-height: 1; background: var(--color-secondary); color: #fff; }
.yd-tabs button.is-on .yd-n { background: var(--color-accent); color: var(--green-900); }

/* ================= corporate shell: collapsible sidebar, top bar, minimal footer ================= */
body.yd-body { --header-h: 64px; --yd-side: 216px; --yd-side-mini: 64px; margin: 0; background: var(--color-background); font-family: var(--font-en); color: var(--color-text); }
body.yd-body.yd-mini { --yd-side: var(--yd-side-mini); }
body.yd-body main.yd-page { margin: 0; padding: 0; }
body.yd-body #yd-app { display: block; min-height: 100vh; }
.yd-loading { padding: var(--sp-8) var(--sp-5); }

.yd-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--yd-side); z-index: 60; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--green-900, #123628), var(--color-primary)); color: rgba(255,255,255,.86); transition: width .22s var(--ease, ease), transform .22s var(--ease, ease); overflow: hidden; }
.yd-brand { flex: none; height: var(--header-h); display: flex; align-items: center; padding: 0 var(--sp-4); border-bottom: 1px solid rgba(255,255,255,.1); }
.yd-brand img { height: 40px; width: auto; max-width: 100%; background: rgba(255,255,255,.95); border-radius: 8px; padding: 3px 8px; }
body.yd-body .yd-tabs { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; padding: var(--sp-3) var(--sp-3); scrollbar-width: none; }
body.yd-body .yd-tabs::-webkit-scrollbar { display: none; }
body.yd-body .yd-tabs button, .yd-side-foot a { position: relative; width: 100%; display: flex; align-items: center; gap: var(--sp-3); padding: 11px 14px; border: 0; border-radius: 10px; background: transparent; color: rgba(255,255,255,.82); font: inherit; font-size: var(--small); font-weight: 600; text-align: left; white-space: nowrap; text-decoration: none; cursor: pointer; }
body.yd-body .yd-tabs button .btn-ic, .yd-side-foot .btn-ic { flex: none; color: rgba(255,255,255,.7); transform: none; }
body.yd-body .yd-tabs button:hover, .yd-side-foot a:hover { background: rgba(255,255,255,.09); color: #fff; }
body.yd-body .yd-tabs button.is-on { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 3px 0 0 var(--color-accent); }
body.yd-body .yd-tabs button.is-on .btn-ic { color: var(--gold-light, #F2C566); }
.yd-side-foot { flex: none; padding: var(--sp-3); border-top: 1px solid rgba(255,255,255,.1); }
body.yd-body .yd-tabs button .yd-n { margin-left: auto; }

.yd-col { margin-left: var(--yd-side); min-height: 100vh; display: flex; flex-direction: column; min-width: 0; transition: margin-left .22s var(--ease, ease); }
.yd-top { position: sticky; top: 0; z-index: 40; height: var(--header-h); display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-5); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.yd-burger { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-primary); cursor: pointer; }
.yd-burger:hover { background: var(--green-50); }
.yd-title { flex: 1; min-width: 0; font-weight: 700; font-size: var(--h4); color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yd-pm { position: relative; flex: none; }
.yd-pm-btn { display: flex; align-items: center; gap: var(--sp-2); padding: 4px 8px 4px 4px; border: 1px solid transparent; border-radius: 999px; background: transparent; font: inherit; color: var(--color-text); cursor: pointer; }
.yd-pm-btn:hover, .yd-pm-btn[aria-expanded="true"] { background: var(--green-50); border-color: var(--color-border); }
.yd-pm-id { display: grid; text-align: left; line-height: 1.2; }
.yd-pm-id strong { font-size: var(--small); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yd-pm-id small { font-size: var(--xs); color: var(--color-muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.yd-avatar { width: 38px; height: 38px; font-size: var(--small); }
.yd-pm-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; padding: var(--sp-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 12px 32px rgba(26,34,30,.18); }
.yd-pm-menu[hidden] { display: none; }
.yd-pm-head { display: grid; gap: 2px; padding: var(--sp-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--sp-2); overflow-wrap: anywhere; }
.yd-pm-head small { color: var(--color-muted); font-size: var(--xs); }
.yd-pm-menu button, .yd-pm-menu a { width: 100%; display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: var(--small); font-weight: 600; color: var(--color-text); text-decoration: none; cursor: pointer; text-align: left; }
.yd-pm-menu button:hover, .yd-pm-menu a:hover { background: var(--green-50); color: var(--color-primary); }
.yd-pm-menu a:last-child { color: var(--color-secondary); }

body.yd-body .yd-content { flex: 1; width: 100%; max-width: 1240px; margin-inline: auto; padding: var(--sp-5); min-width: 0; }
.yd-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-muted); font-size: var(--xs); }
.yd-foot a { color: var(--color-primary); font-weight: 700; }
.yd-foot a:hover { text-decoration: underline; }
.yd-scrim { display: none; }
.yd-profile { max-width: 760px; }

/* collapsed: icon rail */
body.yd-mini .yd-brand { justify-content: center; padding: 0; }
body.yd-mini .yd-brand img { height: 34px; width: 34px; object-fit: cover; object-position: left center; padding: 3px; }
body.yd-mini .yd-tabs button { justify-content: center; padding: 11px 0; }
body.yd-mini .yd-tabs button span:not(.yd-n), body.yd-mini .yd-side-foot span { display: none; }
body.yd-mini .yd-side-foot a { justify-content: center; padding: 11px 0; }
body.yd-mini .yd-tabs button .yd-n { position: absolute; top: 4px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }

/* phones and tablets: the sidebar slides over the page */
@media (max-width: 959px) {
  .yd-sidebar, body.yd-mini .yd-sidebar { width: 236px; transform: translateX(-100%); box-shadow: none; }
  body.yd-open .yd-sidebar { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  body.yd-open { overflow: hidden; }
  body.yd-open .yd-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(15,25,20,.5); }
  .yd-col, body.yd-mini .yd-col { margin-left: 0; }
  body.yd-mini .yd-tabs button { justify-content: flex-start; padding: 11px 14px; }
  body.yd-mini .yd-tabs button span:not(.yd-n), body.yd-mini .yd-side-foot span { display: inline; }
  body.yd-mini .yd-brand { justify-content: flex-start; padding: 0 var(--sp-4); }
  body.yd-mini .yd-brand img { width: auto; height: 40px; }
  body.yd-mini .yd-tabs button .yd-n { position: static; min-width: 22px; height: 22px; font-size: 12px; }
  .yd-top { padding: 0 var(--sp-3); }
  .yd-pm-id, .yd-pm-btn .btn-ic { display: none; }
  .yd-pm-btn { padding: 2px; }
  .yd-title { font-size: var(--body); }
  body.yd-body .yd-content { padding: var(--sp-3); }
  .yd-foot { padding: var(--sp-3); }
  .yd-hero { padding: var(--sp-5); }
}
@media (prefers-reduced-motion: reduce) { .yd-sidebar, .yd-col { transition: none; } }

/* ================= compact scale: smaller type, spacing and controls across the dashboard ================= */
body.yd-body {
  --xs: 0.75rem; --small: 0.875rem; --body: 0.9375rem; --lead: 1rem; --h4: 1.0625rem; --h3: 1.1875rem; --h2: 1.4375rem; --h1: 1.625rem;
  --sp-1: 3px; --sp-2: 6px; --sp-3: 9px; --sp-4: 12px; --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --sp-8: 32px;
  --header-h: 58px; font-size: 15px; line-height: 1.5;
}
body.yd-body .btn { min-height: 34px; padding: 0 14px; font-size: var(--small); border-radius: 8px; }
body.yd-body .yd-bar .btn, body.yd-body .yd-row-act .btn, body.yd-body .yd-tk-act .btn { min-height: 32px; padding: 0 12px; }
body.yd-body .yd-bar input, body.yd-body .yd-bar select { min-height: 36px; font-size: var(--small); padding: 4px 10px; }
body.yd-body .yd-f input[type="text"], body.yd-body .yd-f input[type="password"], body.yd-body .yd-f input[type="date"], body.yd-body .yd-f input[type="datetime-local"], body.yd-body .yd-f input[type="file"], body.yd-body .yd-f select, body.yd-body .yd-f textarea, body.yd-body .yd-card2 select, body.yd-body .yd-card2 textarea, body.yd-body .yd-tk-in input { font-size: var(--small); padding: 7px 10px; }
body.yd-body .yd-row img, body.yd-body .yd-noimg { width: 52px; height: 52px; }
body.yd-body .yd-avatar { width: 32px; height: 32px; }
body.yd-body .yd-burger { width: 34px; height: 34px; }
body.yd-body .yd-brand img { height: 32px; }
body.yd-body .yd-tabs button, body.yd-body .yd-side-foot a { padding: 8px 12px; gap: var(--sp-3); }
body.yd-body .yd-stat { padding: var(--sp-4); }
body.yd-body .yd-hero { padding: var(--sp-5) var(--sp-6); }
body.yd-body .yd-rte { min-height: 180px; }
body.yd-body .yd-content { max-width: 1160px; }
body.yd-mini .yd-tabs button, body.yd-mini .yd-side-foot a { padding: 9px 0; }

/* profile: the password section matches the rest of the form */
.yd-profile .yd-block { margin: var(--sp-5) 0 0; padding: var(--sp-4) 0 0; border: 0; border-top: 1px solid var(--color-border); border-radius: 0; background: transparent; }
.yd-profile .yd-block h3 { color: var(--color-text); }

/* WordPress-style editor toolbar, joined to the writing box */
body.yd-body .yd-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px; background: #F6F7F7; border: 1px solid var(--color-border); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
body.yd-body .yd-tools button { width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--color-text); font-size: 14px; cursor: pointer; }
body.yd-body .yd-tools button:hover { background: #fff; border-color: var(--color-border); color: var(--color-primary); }
body.yd-body .yd-tools button:active { background: var(--green-50); }
body.yd-body .yd-fmt { width: auto; min-width: 112px; height: 30px; padding: 0 8px; margin-right: 4px; font: inherit; font-size: var(--small); border: 1px solid var(--color-border); border-radius: 5px; background: #fff; color: var(--color-text); }
.yd-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--color-border); }
body.yd-body .yd-tools + .yd-rte { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.yd-rte blockquote { margin: var(--sp-3) 0; padding-left: var(--sp-4); border-left: 3px solid var(--color-accent); color: var(--color-muted); }
.yd-rte h2 { font-size: var(--h3); margin: var(--sp-3) 0 var(--sp-2); }
.yd-rte ol { list-style: decimal; padding-left: 1.4em; }
.yd-rte hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--sp-4) 0; }

/* Light sidebar (soft sky blue) instead of dark green */
.yd-sidebar { background: linear-gradient(180deg, #EAF2FB, #DCE9F6); color: #33465A; border-right: 1px solid #C9DAEC; }
.yd-brand, .yd-side-foot { border-color: #C9DAEC; }
.yd-brand img { background: #fff; box-shadow: 0 1px 3px rgba(40,70,110,.12); }
body.yd-body .yd-tabs button, .yd-side-foot a { color: #33465A; }
body.yd-body .yd-tabs button .btn-ic, .yd-side-foot .btn-ic { color: #5B7390; }
body.yd-body .yd-tabs button:hover, .yd-side-foot a:hover { background: rgba(255,255,255,.7); color: var(--color-primary); }
body.yd-body .yd-tabs button.is-on { background: #fff; color: var(--color-primary); box-shadow: inset 3px 0 0 var(--color-accent), 0 1px 3px rgba(40,70,110,.12); }
body.yd-body .yd-tabs button.is-on .btn-ic { color: var(--color-primary); }
@media (max-width: 959px) { body.yd-open .yd-sidebar { box-shadow: 0 0 40px rgba(30,50,80,.25); } }

/* ===== v2: light, flat dashboard ===== */
/* greeting banner: soft light instead of dark green */
.yd-hero, body.yd-body .yd-hero { background: linear-gradient(120deg, #E9F2EC, #F7F0DE); color: var(--color-primary); box-shadow: none; border: 1px solid var(--color-border); }
.yd-hero h1 { color: var(--color-primary); }
.yd-hero p { color: var(--color-muted); }
.yd-hero .btn-outline { color: var(--color-primary); border-color: rgba(27,77,58,.35); background: rgba(255,255,255,.6); }
.yd-hero .btn-outline:hover { background: #fff; }

/* sidebar: light tint of the site green; selected item is a soft tint with no border */
.yd-sidebar { background: #E4EFE7; color: var(--green-900, #123628); border-right: 1px solid #CFE0D4; }
.yd-brand, .yd-side-foot { border-color: #CFE0D4; }
.yd-brand img { background: #fff; box-shadow: none; }
body.yd-body .yd-tabs button, .yd-side-foot a { color: #2C4A3C; }
body.yd-body .yd-tabs button .btn-ic, .yd-side-foot .btn-ic { color: #5E7F6E; }
body.yd-body .yd-tabs button:hover, .yd-side-foot a:hover { background: rgba(27,77,58,.07); color: var(--color-primary); }
body.yd-body .yd-tabs button.is-on { background: rgba(27,77,58,.12); color: var(--color-primary); box-shadow: none; }
body.yd-body .yd-tabs button.is-on .btn-ic { color: var(--color-primary); }
@media (max-width: 959px) { body.yd-open .yd-sidebar { box-shadow: 0 0 24px rgba(0,0,0,.12); } }

/* footer stays at the bottom of the window */
.yd-foot { position: sticky; bottom: 0; z-index: 30; }

/* flat: no shadows, no accent tabs, no lift on hover */
body.yd-body .yd-main, body.yd-body .yd-bar, body.yd-body .yd-stat, body.yd-body .yd-card, body.yd-body .yd-card2, body.yd-body .yd-edit, body.yd-body .yd-row, body.yd-body .yd-side-nav, body.yd-body .yd-empty, body.yd-body .yd-pm-menu { box-shadow: none; background-image: none; }
body.yd-body .yd-row, body.yd-body .yd-row:nth-child(3n+2), body.yd-body .yd-row:nth-child(3n) { border-left: 1px solid var(--color-border); }
body.yd-body .yd-stat:hover, body.yd-body .yd-row:hover { transform: none; box-shadow: none; }

/* no heavy ring when a field is focused (search bars, inputs, selects) */
body.yd-body input:focus, body.yd-body input:focus-visible, body.yd-body select:focus, body.yd-body select:focus-visible, body.yd-body textarea:focus, body.yd-body textarea:focus-visible, body.yd-body .yd-rte:focus { outline: none; box-shadow: none; border-color: var(--green-700, #2F6B4F); }

/* list toolbar: status pills, total, page size */
.yd-fbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.yd-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); max-width: 100%; }
.yd-pills button { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: var(--small); font-weight: 700; color: var(--color-muted); cursor: pointer; white-space: nowrap; }
.yd-pills button:hover { color: var(--color-primary); }
.yd-pills button.is-on { background: var(--color-primary); color: #fff; }
.yd-pills b { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--green-50); color: var(--color-primary); font-size: 11px; }
.yd-pills button.is-on b { background: var(--color-accent); color: var(--green-900); }
.yd-size { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--small); color: var(--color-muted); }
.yd-size select { font: inherit; font-size: var(--small); min-height: 34px; padding: 2px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); }
.yd-total { margin: 0 0 var(--sp-3); font-size: var(--small); color: var(--color-muted); }
.yd-total strong { color: var(--color-primary); font-size: var(--h4); }
.yd-more { margin-top: var(--sp-4); text-align: center; }
.yd-more[hidden] { display: none; }

/* Suggestion detail: status + ward on top, progress bar, message left, response right */
.yd-fb-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.yd-fb-top .yd-h { margin: 0; }
.yd-fb-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.yd-steps { display: flex; gap: 4px; margin-bottom: var(--sp-5); }
.yd-step { flex: 1 1 0; padding: 8px 10px; text-align: center; font-size: var(--xs); font-weight: 700; color: var(--color-muted); background: var(--green-50); border-radius: 999px; }
.yd-step.is-done { background: var(--green-700, #2F6B4F); color: #fff; }
.yd-step.is-now { background: var(--color-accent); color: var(--green-900); }
.yd-step.is-no { background: #F3D9D3; color: #8A2E1F; }
@media (min-width: 900px) { .yd-fb-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .yd-fb-grid .yd-side { position: static; } }
.yd-fb-grid .yd-private { margin-bottom: 0; }

.yd-brand img { background: transparent; padding: 0; height: 44px; }
body.yd-mini .yd-brand img { padding: 0; }

/* Sign-in: just the form, centred, sized to fit the window with no scrolling (footer hidden on this screen) */
body:has(.yd-page--login) .site-footer { display: none; }
.yd-page--login .yd-signin { min-height: calc(100svh - var(--header-h, 100px)); padding-block: var(--sp-4); box-sizing: border-box; }
.yd-page--login .yd-signin-in { width: min(440px, 100% - 32px); grid-template-columns: minmax(0, 1fr); }
.yd-page--login .yd-signin-card { padding: var(--sp-6) var(--sp-6); }
.yd-page--login .yd-signin-card h1 { font-size: var(--h3); }
.yd-page--login .yd-sub { margin-bottom: var(--sp-3); }
.yd-page--login .yd-form input[type="text"], .yd-page--login .yd-form input[type="password"] { min-height: 42px; }
.yd-page--login .yd-go { min-height: 44px; margin-top: var(--sp-3); }
.yd-page--login .yd-forgot, .yd-page--login .yd-back-home { margin-top: var(--sp-3); }

/* Sign-in: slim one-line footer under the form (the full site footer stays hidden) */
.yd-page--login .yd-signin { min-height: calc(100svh - var(--header-h, 100px) - 44px); }
.yd-minifoot { margin: 0; height: 44px; display: flex; align-items: center; justify-content: center; font-size: var(--xs); color: var(--color-muted); border-top: 1px solid var(--color-border); }

/* Sign-in is a full-screen card on its own: no site header or footer, logo on top, background follows the cursor */
body.yd-login-body { margin: 0; }
.yd-page--login .yd-signin { min-height: 100svh; padding-block: var(--sp-4); --mx: 50%; --my: 40%; position: relative; overflow: hidden; justify-content: center;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(217,164,65,.28), transparent 60%), radial-gradient(760px circle at calc(100% - var(--mx)) calc(100% - var(--my)), rgba(47,107,79,.20), transparent 62%), linear-gradient(135deg, #EAF2EC, #F8F1DF); }
.yd-page--login .yd-signin::before { content: ""; position: absolute; inset: 0; background-image: var(--pat-dots); opacity: .5; pointer-events: none; }
.yd-page--login .yd-signin-in { position: relative; box-shadow: 0 10px 30px rgba(26,34,30,.08); border: 1px solid var(--color-border); }
.yd-login-logo { display: block; width: 190px; max-width: 70%; height: auto; margin: 0 auto var(--sp-3); }
.yd-page--login .yd-signin-card h1 { text-align: center; }
.yd-page--login .yd-sub { text-align: center; }
@media (prefers-reduced-motion: no-preference) { .yd-page--login .yd-signin { transition: background-position .3s; } }
.yd-login-head { display: flex; align-items: center; gap: var(--sp-3); }
.yd-login-head .yd-login-logo { width: 72px; max-width: 30%; margin: 0; }
.yd-page--login .yd-signin-card h1, .yd-page--login .yd-sub { text-align: left; }
.yd-page--login .yd-sub { margin-top: var(--sp-3); }

/* ===== Sign-in card: large logo on top-left, roomy fields, "Show" text toggle, animated button ===== */
.yd-page--login .yd-signin-in { width: min(400px, 100% - 32px); border-radius: 24px; }
.yd-page--login .yd-signin-card { padding: var(--sp-8) var(--sp-7) var(--sp-7); }
.yd-page--login .yd-login-logo { display: block; width: 168px; max-width: 70%; height: auto; margin: 0 0 var(--sp-6); }
.yd-page--login .yd-signin-card h1 { font-size: 1.75rem; text-align: left; }
.yd-page--login .yd-sub { font-size: var(--body); margin: var(--sp-2) 0 var(--sp-6); }
.yd-page--login .yd-form { gap: var(--sp-2); }
.yd-page--login .yd-form label { margin-top: var(--sp-3); font-size: var(--body); }
.yd-page--login .yd-form input[type="text"], .yd-page--login .yd-form input[type="password"] { min-height: 50px; border-radius: 12px; font-size: 1rem; }
.yd-lrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); }
.yd-lrow label { margin-top: 0 !important; }
.yd-flink { font-size: var(--small); font-weight: 600; color: var(--color-secondary); text-decoration: none; }
.yd-flink:hover { text-decoration: underline; }
.yd-page--login .yd-pass button { width: auto; height: 32px; padding: 0 10px; right: 8px; font: inherit; font-size: var(--small); font-weight: 600; }
.yd-page--login .yd-form .yd-remember { margin-top: var(--sp-4); font-size: var(--body); }
.yd-page--login .yd-remember input { width: 20px; height: 20px; }
.yd-page--login .yd-go { position: relative; overflow: hidden; min-height: 52px; margin-top: var(--sp-5); border: 0; border-radius: 12px; font-size: 1rem; font-weight: 700; color: #fff;
  background: linear-gradient(110deg, var(--color-primary), var(--green-700, #2F6B4F), var(--color-primary)); background-size: 220% 100%; animation: yd-go-flow 6s ease-in-out infinite;
  box-shadow: 0 8px 18px rgba(27,77,58,.25); transition: transform .15s ease, box-shadow .15s ease; }
.yd-page--login .yd-go::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: yd-go-shine 3.4s ease-in-out infinite; }
.yd-page--login .yd-go:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(27,77,58,.32); }
.yd-page--login .yd-go:active { transform: translateY(0) scale(.98); }
@keyframes yd-go-flow { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
@keyframes yd-go-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .yd-page--login .yd-go, .yd-page--login .yd-go::after { animation: none; } }
.yd-page--login .yd-back-home { margin-top: var(--sp-5); }

/* Sign-in: wider and shorter so it fits any laptop screen without scrolling */
.yd-page--login .yd-signin { padding-block: var(--sp-3); }
.yd-page--login .yd-signin-in { width: min(540px, 100% - 24px); }
.yd-page--login .yd-signin-card { padding: var(--sp-6) var(--sp-7); }
.yd-page--login .yd-login-logo { width: 130px; margin-bottom: var(--sp-3); }
.yd-page--login .yd-signin-card h1 { font-size: 1.5rem; }
.yd-page--login .yd-sub { margin: 2px 0 var(--sp-3); font-size: var(--small); }
.yd-page--login .yd-form label { margin-top: var(--sp-2); font-size: var(--small); }
.yd-lrow { margin-top: var(--sp-2); }
.yd-page--login .yd-form input[type="text"], .yd-page--login .yd-form input[type="password"] { min-height: 42px; }
.yd-page--login .yd-form .yd-remember { margin-top: var(--sp-3); font-size: var(--small); }
.yd-page--login .yd-go { min-height: 44px; margin-top: var(--sp-4); }
.yd-page--login .yd-back-home { margin-top: var(--sp-3); }
@media (max-height: 640px) { .yd-page--login .yd-login-logo { width: 100px; } .yd-page--login .yd-signin-card { padding-block: var(--sp-4); } .yd-page--login .yd-back-home { display: none; } }

/* Sign-in: smaller heading, logo links home, a little more room at the bottom, phone friendly */
.yd-logo-link { display: inline-block; margin-bottom: var(--sp-3); }
.yd-page--login .yd-logo-link .yd-login-logo { margin-bottom: 0; }
.yd-page--login .yd-signin-card h1 { font-size: 1.25rem; }
.yd-page--login .yd-signin-card { padding-bottom: var(--sp-8); }
@media (max-width: 480px) {
  .yd-page--login .yd-signin { align-items: center; padding-inline: 0; }
  .yd-page--login .yd-signin-in { width: calc(100% - 24px); border-radius: 20px; }
  .yd-page--login .yd-signin-card { padding: var(--sp-5) var(--sp-5) var(--sp-7); }
  .yd-page--login .yd-login-logo { width: 110px; }
  .yd-page--login .yd-form input[type="text"], .yd-page--login .yd-form input[type="password"] { font-size: 1rem; }
}

/* ===== v3: no coloured card borders; phone-friendly dashboard ===== */
body.yd-body .yd-card, body.yd-body .yd-main, body.yd-body .yd-bar, body.yd-body .yd-card2, body.yd-body .yd-card2:first-child, body.yd-body .yd-edit, body.yd-body .yd-edit:not(:has(.yd-edit-grid)), body.yd-body .yd-stat, body.yd-body .yd-row, body.yd-body .yd-log li, body.yd-body .yd-tk-row, body.yd-body .yd-block, body.yd-body .yd-private, body.yd-body .yd-side-nav { border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
body.yd-body .yd-private { background: var(--green-50); }
body.yd-body .yd-alert { border-left-width: 1px; }

/* status pills become a filter dropdown on phones */
.yd-pillsel { display: none; font: inherit; font-size: var(--body); min-height: 40px; padding: 4px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); width: 100%; }
@media (max-width: 700px) {
  .yd-pills { display: none; }
  .yd-pillsel { display: block; }
  .yd-fbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .yd-size { justify-content: space-between; }

  body.yd-body .yd-content { padding: var(--sp-3); }
  .yd-top { padding: 0 var(--sp-3); }
  .yd-pm-id { display: none; }
  .yd-hero { flex-direction: column; align-items: flex-start; padding: var(--sp-4); gap: var(--sp-3); }
  .yd-quick { width: 100%; }
  .yd-quick .btn { flex: 1 1 auto; justify-content: center; }
  .yd-bar { flex-direction: column; align-items: stretch; }
  .yd-bar input, .yd-bar select, .yd-bar .btn { width: 100%; }
  .yd-row { flex-wrap: wrap; align-items: flex-start; }
  .yd-row-main { flex-basis: 100%; }
  .yd-row-act { width: 100%; }
  .yd-row-act .btn { flex: 1 1 auto; }
  .yd-edit-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .yd-steps { flex-wrap: wrap; }
  .yd-step { flex: 1 1 30%; }
  .yd-save .btn { width: 100%; }
  .yd-main, .yd-card2, .yd-edit:not(:has(.yd-edit-grid)) { padding: var(--sp-4); }
  .yd-foot { position: static; }
  table { display: block; overflow-x: auto; }
}

/* Phone fixes: the search field was stretching tall (its 220px flex-basis became a height in the stacked bar); equal, smaller spacing on every page */
@media (max-width: 700px) {
  .yd-bar { flex-wrap: nowrap; gap: var(--sp-2); padding: var(--sp-3); margin-bottom: var(--sp-3); }
  .yd-bar > *, .yd-bar input[type="search"] { flex: 0 0 auto; }
  .yd-bar input, .yd-bar select { min-height: 40px; height: auto; }
  body.yd-body .yd-content { padding: 10px; }
  body.yd-body .yd-content > *, .yd-list, .yd-edit-grid, .yd-side { gap: 10px; }
  .yd-main, .yd-card2, .yd-card, .yd-edit:not(:has(.yd-edit-grid)), .yd-hero { padding: 12px; }
  .yd-row { padding: 10px; gap: 8px; }
  .yd-stat { padding: 12px; }
  .yd-hero, .yd-fbar, .yd-total, .yd-bar, .yd-stats { margin-bottom: 10px; }
}

/* Quick-action buttons: a soft background each */
.yd-quick .btn { border: 1px solid transparent; box-shadow: none; font-weight: 700; }
.yd-quick [data-new="news"] { background: #D8EADD; color: #1B4D3A; }
.yd-quick [data-new="event"] { background: #F8E6BB; color: #6B4A0E; }
.yd-quick [data-new="blog"] { background: #F2D9CF; color: #7E3F20; }
.yd-quick .btn:hover { filter: brightness(.96); }

/* Overview count cards: smaller, icon beside the number */
.yd-stats { gap: var(--sp-3); }
.yd-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic n" "ic l"; column-gap: var(--sp-3); row-gap: 0; align-items: center; padding: var(--sp-3) var(--sp-4); }
.yd-stat .btn-ic { grid-area: ic; width: 20px; height: 20px; margin: 0; padding: 8px; box-sizing: content-box; border-radius: 10px; background: var(--green-50); }
.yd-stat strong { grid-area: n; font-size: var(--h3); }
.yd-stat span { grid-area: l; font-size: var(--xs); }

/* Profile / settings: one clean divider above "Change password" (no box), and fields that line up */
body.yd-body .yd-profile .yd-block { border: 0; border-top: 1px solid var(--color-border); border-radius: 0; background: transparent; padding: var(--sp-5) 0 0; margin: var(--sp-5) 0 0; }
.yd-grid2 { align-items: start; }
.yd-grid2 .yd-f { margin-bottom: var(--sp-3); }
.yd-f input[type="password"], .yd-f input[type="text"], .yd-f input[type="email"] { height: auto; }

/* Every dashboard button: soft green background (danger stays a soft terracotta) */
body.yd-body .btn-primary, body.yd-body .btn-secondary, body.yd-body .btn-accent, body.yd-body .btn-outline { background: #D8EADD; color: #1B4D3A; border: 1px solid transparent; box-shadow: none; background-image: none; }
body.yd-body .btn-primary:hover, body.yd-body .btn-secondary:hover, body.yd-body .btn-accent:hover, body.yd-body .btn-outline:hover { background: #C6E0CE; color: #1B4D3A; transform: none; box-shadow: none; }
body.yd-body .btn-danger { background: #F2D9CF; color: #7E3F20; border: 1px solid transparent; box-shadow: none; background-image: none; }
body.yd-body .btn-danger:hover { background: #EBC8BA; color: #7E3F20; }
body.yd-body .btn .btn-ic { color: inherit; }
/* the overview quick actions keep the same single colour */
.yd-quick [data-new="news"], .yd-quick [data-new="event"], .yd-quick [data-new="blog"] { background: #D8EADD; color: #1B4D3A; }
body.yd-body .btn:disabled { opacity: .55; }

/* Three button colours, by meaning: green = do / confirm, gold = secondary / neutral, terracotta = remove / reject */
body.yd-body .btn-primary, body.yd-body .btn-accent { background: #D8EADD; color: #1B4D3A; }
body.yd-body .btn-primary:hover, body.yd-body .btn-accent:hover { background: #C6E0CE; color: #1B4D3A; }
body.yd-body .btn-secondary, body.yd-body .btn-outline { background: #F8E6BB; color: #6B4A0E; }
body.yd-body .btn-secondary:hover, body.yd-body .btn-outline:hover { background: #F1DA9F; color: #6B4A0E; }
body.yd-body .btn-danger { background: #F2D9CF; color: #7E3F20; }
body.yd-body .btn-danger:hover { background: #EBC8BA; color: #7E3F20; }
.yd-quick [data-new="news"] { background: #D8EADD; color: #1B4D3A; }
.yd-quick [data-new="event"] { background: #F8E6BB; color: #6B4A0E; }
.yd-quick [data-new="blog"] { background: #F2D9CF; color: #7E3F20; }
body.yd-body #yd-rm { background: #F2D9CF; color: #7E3F20; }
body.yd-body #yd-rm:hover { background: #EBC8BA; color: #7E3F20; }

/* Suggestion detail: no outer box (it clipped the status bar and badges); two clean cards side by side */
body.yd-body .yd-edit:has(.yd-fb-grid) { border: 0; background: transparent; padding: 0; box-shadow: none; max-width: 100%; }
body.yd-body .yd-fb-grid .yd-main { border: 0; background: transparent; padding: 0; }
body.yd-body .yd-fb-grid .yd-private { padding: var(--sp-4); }
body.yd-body .yd-fb-grid .yd-side .yd-card2 { padding: var(--sp-4); }
.yd-fb-top, .yd-steps { max-width: 100%; box-sizing: border-box; }

/* Same on every page: the outer edit wrapper is never a box (it clipped content); the cards inside carry the border */
body.yd-body .yd-edit:has(.yd-main), body.yd-body .yd-edit:has(.yd-edit-grid) { border: 0; background: transparent; padding: 0; box-shadow: none; max-width: 100%; }
body.yd-body .yd-edit-head, body.yd-body .yd-edit-grid, body.yd-body .yd-main, body.yd-body .yd-side { min-width: 0; max-width: 100%; box-sizing: border-box; }
body.yd-body .yd-edit-head { margin-bottom: var(--sp-3); }
body.yd-body .yd-content, body.yd-body .yd-edit { overflow-x: clip; }

/* YouTube embeds inside the editor */
.yd-rte .yd-video { margin: var(--sp-3) 0; }
.yd-video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; }
.yd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-lg); }

/* Editor: fixed height with its own scroll bar, and a drag handle (bottom-right corner) to make it taller */
.yd-rte { height: 300px; min-height: 160px; max-height: 85vh; overflow-y: auto; overflow-x: hidden; resize: vertical; box-sizing: border-box; }

/* Sign-in logo, a little larger */
.yd-page--login .yd-login-logo { width: 150px; }

/* Latest updates editor (Dashboard) */
.yu-row { padding: var(--sp-4); margin-bottom: var(--sp-4); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-lg); }
.yu-head { display: flex; justify-content: space-between; align-items: end; gap: var(--sp-3); flex-wrap: wrap; }
.yu-media { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.yu-th { position: relative; }
.yu-th img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius); display: block; }
.yu-x { cursor: pointer; border: 1px solid #b32d2e; color: #b32d2e; background: #fff; border-radius: 999px; font-size: var(--xs); line-height: 1; padding: 3px 8px; }
.yu-th .yu-x { position: absolute; top: -6px; right: -6px; padding: 2px 6px; }
.yu-fl { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 4px 10px; font-size: var(--xs); }
.yu-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }

/* Dashboard pages use the full width next to the sidebar */
body.yd-body .yd-content { max-width: none; }
body.yd-body .yd-profile { max-width: none; }

/* edit-lock popup */
.yd-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: var(--sp-4); background: rgba(15, 42, 33, .55); }
.yd-modal-box { width: min(440px, 100%); background: var(--color-surface); border-radius: var(--radius-xl); border-top: 4px solid var(--color-accent); padding: var(--sp-5); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.yd-modal-box h3 { font-size: var(--h4); color: var(--color-primary); margin-bottom: var(--sp-3); }
.yd-modal-box p { font-size: var(--small); line-height: 1.55; margin-bottom: var(--sp-2); }
.yd-modal-act { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

.yd-notify { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-1); font-size: var(--small); }
.yd-notify input { width: 18px; height: 18px; accent-color: var(--color-primary); }

/* ===== In the installed app (html.yl-app): the dashboard looks like an app screen. Styles only; nothing is removed or changed in behaviour. ===== */
html.yl-app body.yd-body { background: linear-gradient(180deg, #E9F3EC 0%, #F5F5EC 45%, #FBF2DA 100%) fixed; }
html.yl-app .yd-signin { background: linear-gradient(165deg, #0E3326 0%, #1B4D3A 55%, #2C6F52 100%); min-height: 100vh; padding-block: calc(env(safe-area-inset-top, 0px) + 24px) 24px; }
html.yl-app .yd-signin-in { width: min(460px, 100% - 32px); grid-template-columns: minmax(0, 1fr); border-radius: 28px; background: rgba(255, 255, 255, .96); box-shadow: 0 18px 48px rgba(0, 0, 0, .35); }
html.yl-app .yd-signin-art { display: none; }
html.yl-app .yd-signin-card { padding: 28px 22px; }
html.yl-app .yd-login-logo { display: block; width: 190px; max-width: 70%; height: auto; margin: 0 auto 14px; }
html.yl-app .yd-signin-card h1 { text-align: center; font-size: 1.5rem; color: var(--color-primary); }
html.yl-app .yd-signin-card .yd-sub, html.yl-app .yd-back-home { text-align: center; }
html.yl-app .yd-form input[type="text"], html.yl-app .yd-form input[type="password"] { min-height: 48px; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 14px; background: #F8FBF9; font-size: 1rem; }
html.yl-app .yd-go { width: 100%; min-height: 50px; justify-content: center; border: 0; border-radius: 999px; background: linear-gradient(135deg, #2F7A58, #1B4D3A); color: #fff; font-weight: 700; }

@media (max-width: 959px) {
  html.yl-app body.yd-body { padding-bottom: 0; }
  /* top bar: green app bar with the section title */
  html.yl-app .yd-top { height: auto; min-height: 56px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 14px 10px; border: 0; background: linear-gradient(135deg, #0E3326 0%, #1B4D3A 55%, #2C6F52 100%); box-shadow: 0 4px 16px rgba(14, 51, 38, .25); }
  html.yl-app .yd-burger { display: none; }
  html.yl-app .yd-title { color: #fff; font-size: 1.125rem; }
  html.yl-app .yd-pm-btn { padding: 3px; border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .16); color: #fff; }
  html.yl-app .yd-pm-btn > .btn-ic { display: none; }
  html.yl-app .yd-pm-id { display: none; }
  html.yl-app .yd-avatar { width: 36px; height: 36px; background: #D9A441; color: #2B1F05; }
  html.yl-app .yd-pm-menu { right: 0; border-radius: 18px; }

  /* the menu becomes a bottom tab bar (scrolls sideways when there are many tabs) */
  html.yl-app .yd-sidebar, html.yl-app body.yd-mini .yd-sidebar { position: fixed; inset: auto 0 0 0; z-index: 70; width: auto; height: auto; flex-direction: row; transform: none; padding-bottom: env(safe-area-inset-bottom, 0px); border: 0; border-radius: 22px 22px 0 0; background: rgba(255, 255, 255, .97); color: var(--color-muted); box-shadow: 0 -4px 22px rgba(14, 51, 38, .16); }
  html.yl-app .yd-brand, html.yl-app .yd-side-foot, html.yl-app .yd-scrim, html.yl-app .yd-foot { display: none !important; }
  html.yl-app body.yd-body .yd-tabs { flex-direction: row; gap: 2px; padding: 8px 8px 6px; overflow-x: auto; overflow-y: hidden; }
  html.yl-app body.yd-body .yd-tabs button { flex: none; width: auto; min-width: 68px; flex-direction: column; justify-content: center; gap: 3px; padding: 8px 6px; border-radius: 16px; background: transparent; color: var(--color-muted); font-size: 0.6875rem; font-weight: 700; box-shadow: none; }
  html.yl-app body.yd-body .yd-tabs button .btn-ic { width: 22px; height: 22px; color: inherit; }
  html.yl-app body.yd-body .yd-tabs button span { font-size: 0.6875rem; }
  html.yl-app body.yd-body .yd-tabs button:hover { background: #E3F0E7; color: #1B4D3A; }
  html.yl-app body.yd-body .yd-tabs button.is-on { background: #1B4D3A; color: #fff; box-shadow: 0 3px 10px rgba(27, 77, 58, .3); }
  html.yl-app body.yd-body .yd-tabs button.is-on .btn-ic { color: #F2C566; }
  html.yl-app body.yd-mini .yd-tabs button span:not(.yd-n) { display: inline; }
  html.yl-app body.yd-body .yd-content { padding: 14px 14px calc(env(safe-area-inset-bottom, 0px) + 92px); }

  /* cards, hero, stats */
  html.yl-app .yd-hero { padding: 18px; border-radius: 22px; background: radial-gradient(circle at 92% 0%, rgba(217, 164, 65, .3) 0%, rgba(217, 164, 65, 0) 46%), linear-gradient(135deg, #0E3326, #1B4D3A 55%, #2C6F52); box-shadow: 0 8px 22px rgba(14, 51, 38, .25); }
  html.yl-app .yd-hero h1 { font-size: 1.375rem; }
  html.yl-app .yd-quick { gap: 8px; }
  html.yl-app .yd-quick .btn { min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 0.875rem; }
  html.yl-app .yd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html.yl-app .yd-stat { padding: 14px; border: 0 !important; border-radius: 18px; background: #E3F0E7; box-shadow: none; }
  html.yl-app .yd-stat:nth-child(4n+2) { background: #FFEBD6; } html.yl-app .yd-stat:nth-child(4n+3) { background: #DCEBFA; } html.yl-app .yd-stat:nth-child(4n) { background: #F9DCE0; }
  html.yl-app .yd-stat strong { font-size: 1.5rem; }
  html.yl-app .yd-main, html.yl-app .yd-bar, html.yl-app .yd-card, html.yl-app .yd-card2, html.yl-app .yd-edit:not(:has(.yd-edit-grid)) { border: 1px solid rgba(255, 255, 255, .7); border-top: 1px solid rgba(255, 255, 255, .7); border-radius: 22px; background: rgba(255, 255, 255, .95); box-shadow: 0 4px 18px rgba(26, 34, 30, .08); }
  html.yl-app .yd-bar { padding: 12px; }
  html.yl-app .yd-main { padding: 16px; }
  html.yl-app .yd-row { border-radius: 18px; }
  html.yl-app .yd-bar input, html.yl-app .yd-bar select, html.yl-app .yd-form input, html.yl-app .yd-form select, html.yl-app .yd-form textarea { border-radius: 14px; }
  html.yl-app .yd-badge { border-radius: 999px; }
  html.yl-app .yd-content .btn { border-radius: 999px; }
  html.yl-app .yd-modal-box { border-radius: 24px 24px 0 0; }
  html.yl-app .yd-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }
}

/* app dashboard: four sections in the tab bar, the rest in a sheet that slides up from "More" */
.yd-more-btn, .yd-sheet { display: none; }
@media (max-width: 959px) {
  html.yl-app body.yd-body .yd-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; overflow: visible; padding: 8px 8px 6px; }
  html.yl-app body.yd-body .yd-tabs button { min-width: 0; width: 100%; padding: 7px 2px; }
  html.yl-app body.yd-body .yd-tabs button span:not(.yd-n) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.yl-app .yd-more-btn { display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7px 2px; border: 0; border-radius: 16px; background: transparent; color: var(--color-muted); font: inherit; font-size: 0.6875rem; font-weight: 700; cursor: pointer; }
  html.yl-app .yd-more-btn .btn-ic { width: 22px; height: 22px; }
  html.yl-app .yd-more-btn.is-on { background: #1B4D3A; color: #fff; }
  html.yl-app body.yd-body .yd-tabs .yd-xtra { display: none; }
  html.yl-app body.yd-body .yd-content { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }
  html.yl-app .yd-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 100px); }

  html.yl-app .yd-sheet { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(15, 42, 33, 0); transition: background .25s ease; }
  html.yl-app .yd-sheet[hidden] { display: none; }
  html.yl-app .yd-sheet.is-open { background: rgba(15, 42, 33, .5); }
  html.yl-app .yd-sheet-bg { position: absolute; inset: 0; }
  html.yl-app .yd-sheet-box { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 22px); border-radius: 26px 26px 0 0; background: #EEF5F0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .25); transform: translateY(100%); transition: transform .28s ease; }
  html.yl-app .yd-sheet.is-open .yd-sheet-box { transform: none; }
  html.yl-app .yd-sheet-grab { display: block; width: 42px; height: 5px; margin: 0 auto 14px; border-radius: 999px; background: #B7C4BC; }
  html.yl-app .yd-sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  html.yl-app .yd-st { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px; border: 0; border-radius: 20px; background: #E3F0E7; color: #1B4D3A; font: inherit; font-size: 0.8125rem; font-weight: 700; text-decoration: none; cursor: pointer; }
  html.yl-app .yd-st:nth-child(5n+2) { background: #FFEBD6; color: #B5601A; } html.yl-app .yd-st:nth-child(5n+3) { background: #DCEBFA; color: #2F6FB5; } html.yl-app .yd-st:nth-child(5n+4) { background: #E7DFF7; color: #5B3AA6; } html.yl-app .yd-st:nth-child(5n+5) { background: #F9DCE0; color: #B0243A; }
  html.yl-app .yd-st.is-on { box-shadow: inset 0 0 0 2px #1B4D3A; }
  html.yl-app .yd-st .btn-ic { width: 28px; height: 28px; }
  html.yl-app .yd-st .yd-n { position: absolute; top: 8px; right: 10px; }
}
@media (max-width: 959px) {
  html.yl-app .yd-content .yd-hero h1, html.yl-app .yd-content .yd-hero h2 { color: #fff !important; }
  html.yl-app .yd-content .yd-hero p { color: rgba(255, 255, 255, .95) !important; }
}
.yu-sum { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); list-style: none; }
.yu-sum::-webkit-details-marker { display: none; }
.yu-sum::after { content: "▾"; color: var(--color-muted); transition: transform .2s; }
.yu-row:not([open]) .yu-sum::after { transform: rotate(-90deg); }
.yu-sum small { margin-left: auto; color: var(--color-muted); }
.yu-row[open] > .yu-sum { margin-bottom: var(--sp-3); }

/* course enrolments */
.ye-wrap { overflow-x: auto; margin: 0 0 var(--sp-3); }
.ye-t { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.ye-t th { padding: 8px 10px; text-align: left; color: var(--color-muted); font-size: .8125rem; border-bottom: 1px solid var(--color-border); }
.ye-t td { padding: 10px; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.ye-t td small { display: block; color: var(--color-muted); font-size: .8125rem; }
.ye-t tr.is-off { opacity: .55; }
.ye-t select { min-height: 38px; padding: 4px 10px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; font: inherit; }
.ye-pd { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ye-wa { color: #1F8A4C; font-weight: 700; font-size: .8125rem; }

.ye-sess { margin: 0 0 var(--sp-3); padding: var(--sp-3); border: 1px dashed var(--color-border); border-radius: 14px; background: var(--color-background); }
.ye-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ye-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #E3F0E7; color: #14543A; font-size: .8125rem; font-weight: 700; }
.ye-chip button { border: 0; background: none; color: #B32D2E; font-size: 1rem; line-height: 1; cursor: pointer; }
.ye-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ye-add input { min-height: 42px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 10px; font: inherit; }
.ye-t th, .ye-t td { white-space: nowrap; }
.ye-t td:first-child { white-space: normal; min-width: 150px; }
.ye-at { width: 20px; height: 20px; accent-color: #1F6B45; }
.ye-pc { color: #B5541C; } .ye-pc.is-ok { color: #1F6B45; }
.ye-link { border: 0; background: none; color: var(--color-secondary); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; }
.ye-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* course lessons */
.yl-row { padding: var(--sp-3) var(--sp-4); }
.yl-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.yl-sum::-webkit-details-marker { display: none; }
.yl-mv button { width: 34px; height: 34px; margin-left: 4px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; cursor: pointer; font-size: 1rem; }
.yl-row[open] > .yl-sum { margin-bottom: var(--sp-3); }
.yl-fl { width: 150px; min-height: 30px; padding: 2px 8px; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; font-size: .8125rem; }