/* Mobile-first wellbeing app — designed for thumb reach. The shortcode page
   should ideally be served on a mostly-empty WP page template; we still
   contain ourselves in .pfwf-app so theme chrome doesn't fight us too much. */

.pfwf-app {
    --pfwf-bg: #f7f6fb;
    --pfwf-surface: #ffffff;
    --pfwf-text: #1c1c24;
    --pfwf-muted: #6b6b78;
    --pfwf-accent: #7a4f9b;
    --pfwf-accent-ink: #ffffff;
    --pfwf-ok: #0a7e07;
    --pfwf-err: #a33;
    --pfwf-border: #e6e4ee;
    --pfwf-radius: 14px;
    --pfwf-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);

    max-width: 640px;
    margin: 0 auto;
    padding: 0 14px 96px;
    color: var(--pfwf-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.4;
    background: var(--pfwf-bg);
    min-height: 100vh;
    box-sizing: border-box;
}
.pfwf-app *, .pfwf-app *::before, .pfwf-app *::after { box-sizing: border-box; }

/* --- Header --- */
.pfwf-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 4px;
    position: sticky; top: 0;
    background: var(--pfwf-bg);
    z-index: 5;
}
.pfwf-brand {
    font-weight: 700; font-size: 18px; letter-spacing: 0.2px;
    color: var(--pfwf-accent);
}
.pfwf-owner-static, .pfwf-owner-switch select {
    font-size: 14px; color: var(--pfwf-muted);
    background: var(--pfwf-surface);
    border: 1px solid var(--pfwf-border);
    border-radius: 999px;
    padding: 6px 12px;
}
.pfwf-owner-switch select { -webkit-appearance: none; appearance: none; }

/* --- Headings --- */
.pfwf-h1 { font-size: 22px; margin: 8px 0 12px; font-weight: 700; }
.pfwf-h2 { font-size: 14px; margin: 22px 0 8px; font-weight: 600;
           color: var(--pfwf-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* --- Cards --- */
.pfwf-card {
    display: block;
    background: var(--pfwf-surface);
    border: 1px solid var(--pfwf-border);
    border-radius: var(--pfwf-radius);
    padding: 14px 16px;
    box-shadow: var(--pfwf-shadow);
    margin-bottom: 12px;
    color: inherit;
    text-decoration: none;
}
.pfwf-card-fast { border-color: var(--pfwf-accent); }
.pfwf-card-title { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.pfwf-card-meta  { font-size: 13px; color: var(--pfwf-muted); }
.pfwf-card-cta   { font-size: 13px; color: var(--pfwf-accent); margin-top: 6px; font-weight: 600; }

/* --- Tile grid --- */
.pfwf-tiles {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.pfwf-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 88px; padding: 12px;
    background: var(--pfwf-surface);
    border: 1px solid var(--pfwf-border);
    border-radius: var(--pfwf-radius);
    color: inherit; text-decoration: none;
    box-shadow: var(--pfwf-shadow);
    transition: transform 0.05s ease;
}
.pfwf-tile:active { transform: scale(0.98); }
.pfwf-tile-icon  { font-size: 26px; margin-bottom: 6px; }
.pfwf-tile-label { font-size: 14px; font-weight: 600; text-align: center; }
.pfwf-tile-value { font-size: 18px; font-weight: 700; color: var(--pfwf-accent); margin-top: 4px; }
.pfwf-tile-unit  { font-size: 12px; font-weight: 500; color: var(--pfwf-muted); }
.pfwf-tile-meta  { font-size: 11px; color: var(--pfwf-muted); margin-top: 2px; }

/* --- Forms --- */
.pfwf-form {
    background: var(--pfwf-surface);
    border: 1px solid var(--pfwf-border);
    border-radius: var(--pfwf-radius);
    padding: 14px;
    box-shadow: var(--pfwf-shadow);
    margin-bottom: 16px;
}
.pfwf-label {
    display: block; font-size: 13px; color: var(--pfwf-muted);
    font-weight: 600; margin-bottom: 12px;
}
.pfwf-input {
    display: block; width: 100%;
    padding: 12px;
    margin-top: 4px;
    border: 1px solid var(--pfwf-border);
    border-radius: 10px;
    font-size: 16px; /* 16px to stop iOS zoom-on-focus */
    background: #fff;
    color: var(--pfwf-text);
    -webkit-appearance: none; appearance: none;
}
.pfwf-input:focus { outline: 2px solid var(--pfwf-accent); outline-offset: 0; }
select.pfwf-input { background-image: linear-gradient(45deg, transparent 50%, var(--pfwf-muted) 50%),
                                       linear-gradient(135deg, var(--pfwf-muted) 50%, transparent 50%);
                    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
                    background-size: 5px 5px, 5px 5px;
                    background-repeat: no-repeat; padding-right: 32px; }
.pfwf-input-body { min-height: 140px; font-family: inherit; }

/* --- Buttons --- */
.pfwf-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 16px; border-radius: 999px; border: none;
    font-size: 15px; font-weight: 600; cursor: pointer;
    background: var(--pfwf-surface); color: var(--pfwf-text);
    border: 1px solid var(--pfwf-border);
    min-height: 44px; /* Apple HIG tap target */
}
.pfwf-btn-primary { background: var(--pfwf-accent); color: var(--pfwf-accent-ink); border-color: var(--pfwf-accent); width: 100%; }
.pfwf-btn-danger  { background: var(--pfwf-err); color: #fff; border-color: var(--pfwf-err); }
.pfwf-btn-ghost   { background: transparent; color: var(--pfwf-muted); }
.pfwf-btn-small   { padding: 8px 12px; font-size: 13px; min-height: 36px; }
.pfwf-row { display: flex; gap: 8px; }
.pfwf-row .pfwf-btn { flex: 1; }

/* --- Flash messages --- */
.pfwf-flash { padding: 10px 14px; border-radius: 10px; margin: 8px 0 12px; font-size: 14px; font-weight: 600; }
.pfwf-flash-ok  { background: #e8f5e9; color: #1b5e20; border: 1px solid #c8e6c9; }
.pfwf-flash-err { background: #fdecea; color: #7a1f1f; border: 1px solid #f5c6c6; }

/* --- Lists / row cards --- */
.pfwf-list { display: flex; flex-direction: column; gap: 8px; }
.pfwf-row-card {
    background: var(--pfwf-surface);
    border: 1px solid var(--pfwf-border);
    border-radius: var(--pfwf-radius);
    padding: 12px 14px;
    box-shadow: var(--pfwf-shadow);
}
.pfwf-row-meta { font-size: 12px; color: var(--pfwf-muted); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pfwf-row-title { font-weight: 600; font-size: 14px; }
.pfwf-row-title strong { font-weight: 700; margin: 0 4px; }
.pfwf-row-body  { font-size: 14px; }
.pfwf-row-notes { font-size: 13px; color: var(--pfwf-muted); margin-top: 4px; font-style: italic; }
.pfwf-row-actions { display: flex; gap: 8px; margin-top: 8px; }

/* --- Food picker --- */
.pfwf-foodpicker { margin-bottom: 12px; }
.pfwf-foodfilter { margin-bottom: 8px; }
.pfwf-foodpicker-summary { font-size: 13px; color: var(--pfwf-muted); margin-bottom: 8px; }
.pfwf-foodgroup {
    border: 1px solid var(--pfwf-border);
    border-radius: 10px;
    margin-bottom: 8px;
    background: #fff;
}
.pfwf-foodgroup > summary {
    list-style: none; cursor: pointer;
    padding: 10px 12px; font-weight: 600; font-size: 14px;
}
.pfwf-foodgroup > summary::-webkit-details-marker { display: none; }
.pfwf-foodgroup[open] > summary { border-bottom: 1px solid var(--pfwf-border); }
.pfwf-fooditems { padding: 4px 8px 8px; }

.pfwf-fooditem {
    display: flex; align-items: center; gap: 8px;
    padding: 8px; border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}
.pfwf-fooditem:hover { background: #f5f3fb; }
.pfwf-fooditem input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; }
.pfwf-fooditem-name { flex: 1; }
.pfwf-fooditem.is-hi .pfwf-fooditem-name { color: #a33; font-weight: 600; }
.pfwf-fooditem.is-hidden { display: none; }
.pfwf-portion {
    width: 60px; padding: 4px 6px; font-size: 13px;
    border: 1px solid var(--pfwf-border); border-radius: 6px;
    display: none;
}
.pfwf-fooditem.is-checked .pfwf-portion { display: inline-block; }

.pfwf-pill {
    display: inline-block; font-size: 11px; font-weight: 700;
    padding: 2px 7px; border-radius: 999px;
    color: #fff; background: var(--pfwf-muted);
}
.pfwf-pill-s  { background: #5cb85c; }
.pfwf-pill-su { background: #dba617; }

.pfwf-muted { color: var(--pfwf-muted); font-weight: 400; }
.pfwf-empty { color: var(--pfwf-muted); font-style: italic; padding: 20px; text-align: center; }

/* --- Fasting timer --- */
.pfwf-fast-timer { font-size: 32px; font-weight: 700; margin: 12px 0 8px; font-variant-numeric: tabular-nums; }
.pfwf-fast-bar { height: 8px; background: var(--pfwf-border); border-radius: 999px; overflow: hidden; }
.pfwf-fast-bar > span { display: block; height: 100%; background: var(--pfwf-accent); width: 0; transition: width 1s linear; }

/* --- Bottom nav --- */
/* Bottom nav: 9 items now (Home/Log/Fast/Food/Exercise/Photo/Read/Meditate/Journal).
   Above 480px we fit them all in a fixed grid. Below that we scroll horizontally
   so each tap target stays large enough — beats squishing icons. */
.pfwf-nav {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--pfwf-surface);
    border-top: 1px solid var(--pfwf-border);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    z-index: 10;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.pfwf-nav { display: grid; grid-template-columns: repeat(9, 1fr); }
@media (max-width: 480px) {
    .pfwf-nav {
        display: flex; gap: 0; flex-wrap: nowrap;
        scroll-snap-type: x proximity;
    }
    .pfwf-nav-item { flex: 0 0 56px; scroll-snap-align: start; }
}
.pfwf-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 6px 2px; min-height: 56px;
    color: var(--pfwf-muted); text-decoration: none;
    font-size: 11px;
}
.pfwf-nav-item.is-active { color: var(--pfwf-accent); }
.pfwf-nav-icon  { font-size: 18px; line-height: 1; margin-bottom: 2px; }
.pfwf-nav-label { font-size: 11px; }

/* Books */
.pfwf-book-row { display: block; }
.pfwf-book-head { display: flex; gap: 12px; align-items: flex-start; }
.pfwf-book-cover-wrap { flex: 0 0 60px; }
.pfwf-book-cover { width: 60px; height: 90px; object-fit: cover; border-radius: 4px; display: block; }
.pfwf-book-info { flex: 1; min-width: 0; }
.pfwf-book-note-form { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--pfwf-border); margin-top: 8px; }

/* "+ Add a new book" reveal */
.pfwf-form-toggle { background: var(--pfwf-surface); border: 1px solid var(--pfwf-border); border-radius: var(--pfwf-radius); padding: 10px 14px; margin-bottom: 12px; }
.pfwf-form-toggle > summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0; list-style: none; }
.pfwf-form-toggle > summary::-webkit-details-marker { display: none; }
.pfwf-form-toggle[open] > summary { color: var(--pfwf-accent); }
.pfwf-form-toggle .pfwf-form { box-shadow: none; border: none; padding: 0; margin-bottom: 0; }

/* --- Stats strip (used by exercise view) --- */
.pfwf-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin-bottom: 14px;
}
.pfwf-stat {
    background: var(--pfwf-surface);
    border: 1px solid var(--pfwf-border);
    border-radius: var(--pfwf-radius);
    padding: 10px 8px;
    text-align: center;
    box-shadow: var(--pfwf-shadow);
}
.pfwf-stat-num { font-size: 22px; font-weight: 700; color: var(--pfwf-accent); line-height: 1.1; }
.pfwf-stat-lbl { font-size: 11px; color: var(--pfwf-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }

.pfwf-form-tight { padding: 10px 14px; margin-bottom: 10px; }
.pfwf-form-tight .pfwf-label { margin-bottom: 0; }

/* --- Exercise items grid --- */
.pfwf-ex-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.pfwf-ex-item {
    border: 1px solid var(--pfwf-border);
    border-radius: 10px;
    background: #fff;
    padding: 10px;
}
.pfwf-ex-row-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.pfwf-ex-select { flex: 1; }
.pfwf-ex-fields {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.pfwf-ex-field { display: flex; flex-direction: column; font-size: 12px; color: var(--pfwf-muted); font-weight: 600; }
.pfwf-ex-field span { margin-bottom: 2px; }
.pfwf-ex-field .pfwf-input { padding: 8px; font-size: 15px; }
.pfwf-ex-field-wide { grid-column: 1 / -1; }
/* Hide kind-specific fields when the row's kind doesn't appear in data-show.
   data-show is space-separated (e.g. "weights iso") so substring match works. */
.pfwf-ex-item[data-kind="weights"] .pfwf-ex-field[data-show]:not([data-show~="weights"]) { display: none; }
.pfwf-ex-item[data-kind="cardio"]  .pfwf-ex-field[data-show]:not([data-show~="cardio"])  { display: none; }
.pfwf-ex-item[data-kind="iso"]     .pfwf-ex-field[data-show]:not([data-show~="iso"])     { display: none; }
.pfwf-ex-item[data-kind="other"]   .pfwf-ex-field[data-show]                              { display: none; }

.pfwf-ex-summary { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.pfwf-ex-summary li { padding: 2px 0; }

/* --- Gate (not-logged-in / no-cap) --- */
.pfwf-gate { padding: 40px 20px; text-align: center; color: var(--pfwf-muted); }