/* Additions to Leandro's stylesheet (painel.css, unchanged) for what his prototype did not have:
   sign-in, cards as buttons, editing an apontamento. Same tokens throughout. */

.record-button{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:var(--surface);padding:17px 15px;cursor:pointer}
.record[data-stage=inbox].record-button{border-left:3px solid var(--yellow)}
.record[data-sla=overdue].record-button{border-left-color:var(--red)}
.record-summary{display:block}
@media(max-width:700px){.record-button{padding:20px 16px}}

.gate{max-width:420px;margin:12vh auto 0;padding:0 16px;text-align:center;display:grid;gap:18px;justify-items:center}
.gate[hidden]{display:none}
.gate-logo{width:150px;height:auto}
.gate h1{font-size:26px;letter-spacing:-.04em;font-weight:600}
.gate p{color:var(--muted);font-size:14px}
.link-button{border:0;background:none;color:var(--accent);font-size:12px;padding:4px;min-height:auto;text-decoration:underline}

.save-bar-actions{display:flex;gap:8px}

.edit-apontamento{display:block;margin-top:16px;padding:9px 0;min-height:44px;border:0;background:none;color:var(--accent);font-size:12px;font-weight:600}
.edit-apontamento+.delete-apontamento{margin-top:0}
.delete-apontamento{background:var(--red-bg);border-radius:7px;padding:4px 10px;min-height:32px;font-weight:600}

/* Column colours, stronger than Leandro's (Fernando, Oct 27 2026): Apontamentos takes the Quadro's
   Pendente yellow and Programados its current-month blue (light-mode values, as the panel is light);
   Em avaliação and Concluídos are a step stronger than his. */
body{--yellow-bg:#fbe9b7;--blue-bg:#cadcf3;--purple-bg:#e2d5f3;--green-bg:#cfe9d8}

.record-desc{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}

/* Leandro's button got display:flex from his .js-only class, which this app does not use; without it
   the + sat off-centre in its circle. */
.column-add{display:flex;padding:0;line-height:1}

/* A photo in an open apontamento shows small; a click opens it at full size above the card, and any
   click or Esc closes it (Fernando, Nov 08 2026). Leandro's stylesheet showed it at full width. */
#detail-dialog .origin-card img,#detail-dialog:has(.origin[open]) .origin-card img{max-height:96px;max-width:160px;width:auto;height:auto;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:zoom-in}
dialog.lightbox{width:auto;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:0;border:0;background:transparent;overflow:visible;box-shadow:none;cursor:zoom-out}
dialog.lightbox::backdrop{background:rgba(5,8,12,.82)}
dialog.lightbox img{display:block;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);object-fit:contain;border-radius:8px}

/* Google sign-in button, in Google's own look: white, grey border, the four-colour G. */
.g-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:40px;padding:0 14px;border:1px solid #747775;border-radius:20px;background:#fff;color:#1f1f1f;font:500 14px/1 Roboto,"Segoe UI",Arial,sans-serif;cursor:pointer}
.g-button:hover{background:#f7f8f8;box-shadow:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326}
.g-button:focus-visible{outline:3px solid #4285f4;outline-offset:2px}
.g-logo{flex:none}

/* Sections of a column that open and close (Fernando, Nov 08 2026): BACKLOG in Em avaliação, each
   month in Programados. A heading in the column's colour, a count, a chevron that turns. */
.lane-group{display:flex;flex-direction:column}
.lane-group>summary{list-style:none;display:flex;align-items:center;gap:8px;margin:14px 0 8px;padding:7px 10px;border-radius:7px;cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;user-select:none}
.lane-group:first-child>summary{margin-top:2px}
.lane-group>summary::-webkit-details-marker{display:none}
.lane-group>summary::before{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;flex:none;margin-right:2px}
.lane-group[open]>summary::before{transform:rotate(45deg)}
.lane-group>summary b{margin-left:auto;font-size:12px;letter-spacing:0}
.lane-group>summary:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.lane[data-stage=review] .lane-group>summary{color:var(--purple);background:color-mix(in srgb,var(--purple) 14%,transparent);border:1px solid color-mix(in srgb,var(--purple) 40%,transparent)}
.lane[data-stage=planned] .lane-group>summary{color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,transparent);border:1px solid color-mix(in srgb,var(--blue) 38%,transparent)}
.lane-group-records{display:flex;flex-direction:column;gap:11px}
.records>.lane-group .lane-group-records>.record{flex:0 0 auto}

/* Every card the same height: the description takes exactly two lines, empty or not; an
   apontamento's text, its only line, at most four. */
.record-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:calc(2 * 1.45em)}
.record-title{-webkit-line-clamp:2;line-clamp:2;min-height:calc(2 * 1.4em)}
.record.is-ap .record-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;min-height:calc(2 * 1.4em + 6px + 2 * 1.45 * 13px)}
.priority[data-value=Urgente]{color:var(--red)}

/* Em investigação, as on the Quadro: bright yellow with dark text, the same in both themes. */
.record-flags{display:inline-flex;align-items:center;gap:8px;min-width:0}
.inv-tag{display:inline-flex;align-items:center;background:#ffe600;color:#17212b;border:1px solid #b89b00;border-radius:5px;padding:1px 7px;font-size:10px;font-weight:700;white-space:nowrap}
.meta-line .inv-tag{font-size:11px}

/* Light and dark. */
.main-nav{display:flex;align-items:center;gap:10px}
.theme-button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;min-height:38px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;flex:none}
.theme-button:hover{border-color:var(--accent)}
.theme-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The open card's thread: "Publicar" as a filled button, in the panel's own button colours. */
.comment-form button{background:var(--button);color:var(--button-text);border-radius:20px;padding:8px 18px;font-size:13px;font-weight:650;cursor:pointer}
.comment-form button:hover{filter:brightness(1.08)}
.comment-form button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}