/* Hobbies (the Doing tab). 2026-11-05, job hobbies-build: the one he is
   on as a card with its app and a tick; each hobby a card; a row's
   buttons open on a tap. Out of index.html for the page budget. */

#inNow[hidden]{display:none}
.in-now{background:var(--panel);border:1px solid var(--line-soft);border-radius:20px;padding:16px;margin-bottom:14px;display:flex;flex-direction:column;gap:8px}
.in-now-head{font-size:15px;color:var(--gold)}
.in-from{font-size:13px;color:var(--gold)}
.in-now-title{font-size:21px;line-height:1.25;color:var(--white)}
.in-now-next{all:unset;cursor:pointer;font-size:14px;line-height:1.45;color:var(--grey);min-height:44px;display:flex;align-items:center}
.in-now-next.none{color:var(--dim)}
.in-now-row{display:flex;gap:10px;align-items:center;margin-top:2px}
.in-now-go{flex:1;min-height:52px;border-radius:100px;border:0;background:var(--gold);color:#121110;font:inherit;font-size:15px;font-weight:600;padding:0 18px}
.in-now-go.quiet{background:transparent;color:var(--gold);border:1px solid var(--line)}
.in-tick{width:52px;height:52px;flex:none;border-radius:50%;border:0;background:var(--gold);color:#121110;font:inherit;font-size:20px;font-weight:600}

/* A hobby is a card: its name (a tap opens its buttons), what it opens on
   the right, then its projects, its lessons and + Project. */
.in-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:20px;margin-bottom:12px;overflow:hidden}
.in-head{display:flex;align-items:center;gap:8px;padding:0 8px 0 0;min-height:60px}
.in-name{all:unset;cursor:pointer;flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:8px 0 8px 14px;min-height:44px;font-size:16px;color:var(--white)}
.in-name-w{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.in-mk{width:36px;height:36px;flex:none;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:15px}
.in-quiet .in-name{color:var(--grey)}
.in-go{all:unset;cursor:pointer;flex:none;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:44px;display:flex;align-items:center;padding:0 10px;font-size:13px;color:var(--grey)}
.in-acts{display:flex;gap:8px;flex-wrap:wrap;padding:4px 14px 14px}
.in-acts .btn-s{min-height:44px}

.in-proj{border-top:1px solid var(--line-soft)}
.in-proj-head{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;box-sizing:border-box;width:100%;min-height:56px;justify-content:center;padding:8px 14px 8px 62px}
.in-title{font-size:15px;line-height:1.35;color:var(--white)}
.in-proj.done .in-title{color:var(--dim);text-decoration:line-through}
.in-next{font-size:13px;line-height:1.45;color:var(--grey)}
.in-next.none{color:var(--dim)}
.in-proj .in-acts{padding-left:62px;background:rgba(255,255,255,.02)}

.in-lesson,.in-add{all:unset;cursor:pointer;display:flex;align-items:center;box-sizing:border-box;width:100%;min-height:52px;padding:0 14px 0 62px;border-top:1px solid var(--line-soft);font-size:14px}
.in-lesson{color:var(--gold)}
.in-lesson::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--gold);margin-right:10px;flex:none}
.in-add{color:var(--grey)}
#inList > .in-add{border:0;padding-left:4px}

.in-add-hobby{display:block;width:100%;min-height:48px;margin:4px 0 6px}
.in-fold{all:unset;cursor:pointer;display:flex;align-items:center;width:100%;box-sizing:border-box;min-height:48px;padding:0 4px;color:var(--grey);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.in-notes{width:calc(100% - 28px);margin:0 14px 14px;box-sizing:border-box;background:var(--bg,#121110);border:1px solid var(--line-soft);border-radius:10px;color:var(--white);font:inherit;font-size:14px;line-height:1.6;padding:10px 12px;min-height:90px;resize:vertical}
.in-notes:focus{outline:none;border-color:var(--gold)}

/* Games: the two made here, as big tiles over the phone's list. */
.gm-made{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.gm-tile{all:unset;cursor:pointer;box-sizing:border-box;height:112px;padding:16px;border-radius:20px;background:var(--panel);border:1px solid var(--line-soft);display:flex;flex-direction:column;justify-content:space-between;color:var(--white);font-size:17px}
.gm-tile svg{width:26px;height:26px;color:var(--gold)}
.gm-eye{font-size:15px;color:var(--gold);margin:0 0 4px}