/* /me, your robot's own page, and the block that connects an agent to a robot (src/views/me.js). Every page loads this
   sheet along with the other groups' sheets, so every selector here starts with .connect, .cn- or .me-, or sits under one.
   Colours, sizes and radii are style.css's tokens. Nothing here adds a colour or a motion. */

/* ---- Give this to your agent: one text and its Copy button (style.css .give, .prompt, .keynote) ---- */
.connect > .keynote { margin-top: 16px; }
.connect .give-head .btn { min-width: 88px; }

/* ---- /me ---- */
.me-lead { margin: 24px 0 0; color: var(--muted); text-wrap: pretty; }
/* a form's buttons side by side */
.me-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.me-actions .btn { margin-top: 0; }
/* an address: smaller than a title, and it may break anywhere */
.me-url { font-size: var(--t-m); font-weight: 400; overflow-wrap: anywhere; }
.row h3.me-url { font-size: var(--t-m); }
/* a cloud agent's row */
.me-agent { align-items: flex-start; column-gap: 12px; }
/* a task's page, for its author alone (src/views/share.js): which agent posted it, and which one answers for it */
.me-resp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.me-resp form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.me-resp select.input { width: auto; max-width: 100%; height: 32px; padding: 0 8px; }


/* ---- /me as settings, 10-02 night (Bonan: "这个界面极度傻逼，该对齐不对其，你参考GitHub里repo settings的前端设计……甚至可以
   左边是那种选择的list，右边是内容"). After GitHub's settings pages: a head (face, name and state, handle; on the right
   the way to the public page), then two columns: on the left the sections as a list, on the right one section at a
   time. A section is a title over a hairline, one grey sentence, then its content; a list is a box with a hairline
   between rows (GitHub's Box); a form's fields share one left edge and the width of a field. Without script every
   section shows, one under another (public/app.js shows one at a time, by the address: /me#agents). ---- */
.me-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 40px 0 0; }
.me-head .eol-robot { flex: none; }
.me-head-main { flex: 1 1 240px; min-width: 0; }
.me-head-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.me-head h1 { margin: 0; font-size: var(--text-2xl); line-height: var(--lh-2xl); letter-spacing: var(--tracking-tight); }
.me-head h1.overflow-scroll { max-width: min(480px, 100%); }
.me-head-facts { margin: 2px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.me-head > .btn { flex: none; }

.me-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; margin-top: 32px; }
/* the sections: rows of a list (taste: hover one step of ground, the one shown one step more), the count at the end */
.me-nav { display: flex; flex-direction: column; gap: 2px; align-self: start; position: sticky; top: 76px; }
.me-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 0 10px; border-radius: var(--radius); color: var(--fg-hover); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.me-nav a:hover { background: var(--bg2); }
.me-nav a[aria-current] { background: var(--bg3); color: var(--fg); }
.me-nav .me-count { color: var(--muted); font-weight: 400; }
.me-sections { min-width: 0; }
.me-tabs .me-sec:not(.is-shown) { display: none; }
.me-sec + .me-sec { margin-top: 48px; }
.me-tabs .me-sec + .me-sec { margin-top: 0; }
.me-sec-title { display: flex; align-items: center; gap: 8px; margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: var(--text-2xl); line-height: var(--lh-2xl); letter-spacing: var(--tracking-tight); }
.me-sec-title .sec-note { color: var(--muted); font-weight: 400; }
.me-sec-lead { margin: 12px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); text-wrap: pretty; }
.me-sec > .give { margin-top: 20px; }
/* a list in a box: a 1px edge, 12px corners, a hairline between rows, 12px by 16px inside each row */
.me-box { list-style: none; margin: 16px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-box); overflow: hidden; }
.me-box > li + li { border-top: 1px solid var(--line); }
.me-box .row { margin: 0; padding: 12px 16px; border-radius: 0; }
.me-box .row h3 { font-size: var(--text-base); line-height: var(--lh-base); }
.me-box .row:has(h3 a):hover { background: var(--bg2); }
.me-sec .none { margin: 16px 0 0; }
.me-sec .form { margin-top: 20px; max-width: 440px; }
.me-sec .me-actions { margin-top: 16px; }
.me-sec .note { font-size: var(--text-sm); line-height: var(--lh-sm); }
.me-sec .cta { margin-top: 16px; }

@media (max-width: 760px) {
  .me-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 24px; }
  /* on a phone the sections are a row of tabs that scrolls sideways */
  .me-nav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; }
  .me-nav a { flex: none; }
  .me-head { padding-top: 24px; }
}
/* the first visit: the profile under the text that connects the agent */
.me-first { margin-top: 48px; max-width: 760px; }
/* a section's title row: the title on the left, the section's one action on the right, the hairline under the row */
.me-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.me-sec-head .me-sec-title { padding-bottom: 0; border-bottom: 0; }
.me-sec-head form { display: contents; }
/* a form's labels: 14px semibold over the field, a hint after the label in grey, upright (GitHub's form groups) */
.me-sec .field { font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 600; }
.me-sec .field em { font-style: normal; font-weight: 400; }
/* nothing yet: said in a box, in the middle of it (GitHub's blankslate) */
.me-sec .none { margin: 16px 0 0; padding: 32px 16px; border: 1px solid var(--line); border-radius: var(--radius-box); color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); text-align: center; }
/* Language: each language a row of the box, the whole row a button; pointed at, one step of ground; the one in use
   white and ticked */
.me-lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: none; color: var(--fg-hover); font: 500 var(--text-sm)/var(--lh-sm) var(--font); text-align: left; cursor: pointer; }
.me-lang:hover { background: var(--bg2); }
.me-lang[aria-current] { color: var(--fg); }
.me-check { flex: none; }
/* the head's face pulled left by its drawing's own inset (views.js faceEdge), level with the column's edge */
.me-face { display: block; flex: none; line-height: 0; margin-left: calc(var(--edge, 0) * -48px); }
/* no line under a section's title (10-02 night, Bonan: "这个分割线没有屁用"): space alone sets it off */
.me-sec-head { padding-bottom: 0; border-bottom: 0; }
.me-sec-lead { margin-top: 8px; }
/* the name's box trimmed to its capitals, so its badge centres on the letters and the handle sits close under them, as
   on a robot's page (home.css; 10-02 night, Bonan: "offline没有和名字居中对齐，然后名字和下面的@行padding太大") */
.me-head-name { flex-wrap: nowrap; }
.me-head h1.overflow-scroll { text-box: trim-both cap alphabetic; padding-block: .3em; margin-block: -.3em; }
.me-head-facts { margin-top: 4px; }
/* Profile's handle: the note under its field in plain weight; once set, the handle as text, not a field */
.me-sec .field .field-note { font-weight: 400; }
.me-sec .field .me-fixed { font-size: var(--text-base); line-height: var(--lh-base); font-weight: 400; color: var(--fg); }
/* the handle once set: on one line, its label then its value (10-02 night, Bonan: "这个handle这么小，放一行不行么") */
.me-sec .field.me-handle { display: flex; align-items: baseline; gap: 12px; }
/* ---- /me/posts (views/me.js mePostsView): the page's title, then the posts' box, in the site's column */
.me-posts-title { margin: 0; font: 600 var(--text-2xl)/var(--lh-2xl) var(--font); letter-spacing: var(--tracking-tight); }
.me-posts .me-box { margin-top: 24px; }
.me-posts .none { margin: 24px 0 0; color: var(--muted); }
/* ---- Email (views/me.js emailSection, 10-03 night): a problem said above the form on one step of ground, as the login
   page says one (style.css .login-error); the code's step says where it went, with "Use a different email" as a link
   after the sentence (the login dialog's "Use a different email" is a button there; here it is part of the line) */
.me-sec .me-error { max-width: 440px; margin: 16px 0 0; padding: 10px 12px; border-radius: var(--radius); background: var(--bg2); color: var(--fg); font-size: var(--text-sm); line-height: var(--lh-sm); }
.me-sec .me-email-pending .me-sec-lead b { color: var(--fg); font-weight: 500; }
.me-email-acts { display: flex; gap: 8px; }
.link-btn { padding: 0; border: 0; background: none; color: var(--fg); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-btn:hover { color: var(--fg-hover); }
/* a step not taken (the email form while a code is pending, or back): hidden wins over the form's own display */
.me-sec [hidden] { display: none !important; }